دسته بندی
درگاه پرداخت
paypaad
استفاده از مطالب و خدمات «وبگو» رایگان است، درگاه پرداخت صرفا برای مواردی است که نیاز به پرداخت هزینه دارند.
article

چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟

html-background

شاید برای شما هم پیش آمده باشد که بخواهید رنگ یا تصویر پس زمینه وبلاگ یا سایتتان را تغییر دهید و باب طبع سلیقه ی خودتان تنظیم کنید، هرچند استفاده از رنگ ها و یا عکس و تصاویر وکتور در پس زمینه سایت و وبلاگ امری مرسوم است اما هنوز خیلی از کاربران نمی دانند که دقیقا چگونه باید این کار را انجام دهند، خیلی از طراحان کم تجربه تر وب نیز از برخی قابلیت هایی که می توانند از آن استفاده کنند بی اطلاع هستند، به همین خاطر در این آموزش به این موضوع می پردازیم، با امید به اینکه مفید واقع شود.

استفاده از تگ background و bgcolor در html


اولین و آسان ترین روش تنظیم یک عکس در پس زمینه استفاده از تگ ساده background است و برای رنگ می توانید از تگ bgcolor و یک مقدار هگز استفاده کنید، برای مثال در کد زیر ما تصویری کوچک با نام bg.gif و رنگی با کد 009966 (این کدهای استاندارد در برنامه هایی نظیر فتوشاپ نیز کاربرد دارند) را به صفحه خود اختصاص داده ایم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تغییر پس زمینه با استفاده از html</title>
<!-- http://webgoo.ir -->
</head>
<body background="bg.gif" bgcolor="#009966" dir="rtl">
<hr />
تصاویر پس زمینه این صفحه، از تکرار یک تصویر کوچک ایجاد شده است.
</body>
</html>
پیش نمایش
توضیح:
- در حالت عادی مرورگر تصویر پس زمینه را تا جایی که تمام صفحه را پوشش دهد، در کنار هم تکرار خواهد کرد.
- برای دیدن رنگ پس زمینه، باید نمایش تصاویر را در مرورگرتان غیر فعال کنید.
- برای بدست آوردن کدهای هگز می توانید از ویرایشگر متون html یا برنامه هایی نظیر فتوشاپ استفاده کنید.

استفاده از background در css


اگر چه شیوه ای که در بالا گفتیم بسیار ساده و سریع است، اما روش استاندارد و امروزی نیست، در حال حاضر به جای کدهای خطی html از استایل های  css برای تتنظیمات مربوط به ظاهر صفحات، از جمله رنگ و تصویر پس زمینه استفاده می کنند که از قدرت و انعطاف پذیری بیشتری برخوردارند، به مثال زیر توجه کنید:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تغییر پس زمینه با استفاده از css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    background-color:#999;
    background-image:url(bg.gif);
    background-repeat:repeat;
}
</style>
</head>
<body>
</body>
</html>
کد بالا نیز مانند مثال قبل عمل خواهد کرد با این تفاوت که این بار می توانیم از تنظیمات بیشتری استفاده کنیم، به عنوان مثال ما تصویر bg.gif را تنها در راستای محمور x ها تکرار می کنیم و به تصویر پس زمینه قابلیت اسکرول در متن ها و صفحات طولانی می دهیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تغییر پس زمینه با استفاده از css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    background-color:#999;
    background-image:url(bg.gif);
    background-repeat:repeat-x;
    background-attachment:scroll;
    direction:rtl;
}
</style>
</head>
<body>
<hr />
پس زمینه این صفحه، از تکرار یک تصویر کوچک در راستای محور x ها ایجاد شده است.
</body>
</html>
پیش نمایش
توضیح:
- مقادیر url را باید با آدرس کامل تصویر خود جایگزین کنید.
- background-repeat می تواند مقادیری از جمله  repeat ، repeat-x، repeat-y و no-repeat داشته باشد.
- background-attachment قابلیتی است که می توانید به کمک آن پس زمینه ثابت یا متغیر (اسکرولی) داشته باشد، مقادیر آن fixed و scroll است.
- یک قابلیت دیگری که در مثال تنظیم نشده background-position است که موقعیت عکس پس زمینه را مشخص می کند، مقادیر آن bottom، center، left ، right و top است.
sectionدسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
» نحوه متحرک ساختن متن با تگ marquee در HTML
» چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
» نحوه قرار دادن جستجوی گوگل در سایت یا وبلاگ
» کاربرد متاتگ refresh در صفحات وب (HTML)
» نحوه درج علامت های خاص در HTML
commentنظرات (۶۰ یادداشت برای این مطلب ارسال شده است)
نویسنده: a.ch
زمان: ۲۰:۰۵:۰۵ - تاریخ: ۱۳۹۱/۰۳/۳۰
ممنون ... خیلی نیاز داشتم..
نویسنده: شبگردتنها
زمان: ۱۸:۵۶:۲۲ - تاریخ: ۱۳۹۱/۰۵/۰۶
سلام
چطور یه پس زمینه واسه وبلاگم بزارم؟؟؟؟ واسم ایمیل کنید ممنون راستی برنامه هم بلد نیستم بنویسم
مرسی بای
پاسخ: 
سلام
متاسفانه بدون آشنایی با html و css در حد مقدماتی، نمی توان کمک زیادی کرد، شاید مناسب ترین گزینه در شرایط شما، استفاده از قالب های آماده باشد.
نویسنده: baran
زمان: ۰۱:۲۵:۲۹ - تاریخ: ۱۳۹۱/۰۵/۰۹
سلام یه سوال مهم داشتم
من می خوام بدونم چه طوری یک اهنگ تصویری رو داخل وبلاگم قرار بدم خواهش میکنم زود تر بیاین به وبم و جواب منو بدید
پاسخ: 
سلام
این آموزش را ملاحظه کنید:
آموزش نحوه قرار دادن فیلم و ویدئوهای FLV در وبلاگ و سایت
نویسنده: zahra
زمان: ۲۳:۳۳:۱۳ - تاریخ: ۱۳۹۱/۰۷/۰۹
ببخشید اگه ممکن یه مقدار واضح تر توضیح بدید واسه من که تازه واردم چیزی متوجه نشدم ممنون میشم
پاسخ: 
تنظیم پس زمینه کار چندان سختی نیست، منتها باید ابتدا حداقل آشنایی با html داشته باشید، چرا که بدون آن هر چقدر هم که ساده توضیح دهیم ممکن است به نظرتان پیچیده برسد، در هر صورت اگر در قسمت خاصی مشکل دارید مطرح کنید تا بیشتر راهنمایی کنیم.
نویسنده: UHAN
زمان: ۲۰:۲۸:۰۶ - تاریخ: ۱۳۹۱/۰۷/۱۲
سلام این لینک قالبیه که من میخوام واسه یکی اماده کنم :
http://www.maxtemp.ir/engine/download.php?id=134
من کل امروز رو سعی کردم که بتونم صفحه زمینش رو عوض کنم اما نتونستم اگه میتونید این عکس رو جای صفحه زمینش بذارید و به ایمیلم بفرستید:
http://s1.picofile.com/file/7517590428/Striped_Background_New_Pink.jpg
خیلی ممنون
پاسخ: 
سلام
شما باید ابتدا فایل زیر را ذخیره و ویرایش کنید:
http://www.maxtemp.ir/theme/maxtemp/style.css
و در قسمت body آن، به جای آدرس
background:url("images/body_bg_wood.jpg");
آدرس زیر را جایگزین کنید:
background:url("http://s1.picofile.com/file/7517590428/Striped_Background_New_Pink.jpg");
سپس فایل style.css را از نو در یک سرویس دیگر آپلود کرده و آدرس آن را جایگزین قسمت زیر در کد اصلی قالب کنید:
 <link href="http://www.maxtemp.ir/theme/maxtemp/style.css" rel="stylesheet" type="text/css" />
اکنون قالب شما از فایل css جدید که پس زمینه جدید دارد استفاده می کند.
نویسنده: Ali
زمان: ۲۲:۴۷:۵۷ - تاریخ: ۱۳۹۱/۰۷/۱۸
سلام ، چجوری میشه یه کاری کرد که ، پس زمینه خودشو اتوماتیک با سایز مانیتور بازدید کننده تنظیم کنه ؟
مثلاً اگر والپیپر سایت ما یک عکس در سایز فول اچ دی باشه ، اگر با مانیتور کوچکتر دیده بشه عکس نصفه باز میشه و بقیه عکس میره !
پاسخ: 
سلام
اگر پس زمینه کوچک تر از سایز مانیتور باشد، می توان آن را با css و repeat تکرار کرد تا همپوشانی ایجاد شود، اما اگر تصویر زمینه عریض و بیشتر از سایز مانیتورهای معمولی باشد، نمی توان کار خاصی انجام داد، در واقع این نوع طراحی استاندارد نیست، تنها می توان با background-position تصویر را در وسط صفحه تنظیم کرد، ولی حاشیه آن از مانیتور خارج خواهد شد.
نویسنده: samin
زمان: ۲۲:۴۵:۱۶ - تاریخ: ۱۳۹۱/۰۷/۱۹
من اصلا هیچی در مورد وبلاگ بلد نیستم هر چی می دونید لطفا به من یاد بدین.
مرسی
منتظرم
پاسخ: 
کار با وبلاگ در حد کاربردهای عادی چندان سخت نیست، کافی است کمی وقت بگذارید و مطالعه داشته باشید، در این زمینه منابع آموزشی بسیار خوبی در وب و به زبان فارسی وجود دارد.
نویسنده: سارا
زمان: ۰۹:۳۵:۳۶ - تاریخ: ۱۳۹۱/۰۸/۲۲
سلام می خوام بدونم اگر بخوام رنگ عنوان وبلاگ و سایز و فونتش رو تغییر بدم باید چه کار کنم؟؟؟؟؟؟
پاسخ: 
سلام
باید به قسمت ویرایش قالب بروید و جایی در بالای کد قالب خود، خط زیر را پیدا کنید:
<div id=BlogTitle>نوشته هاي جالب</div>
سپس آن را به صورت نمونه زیر تغییر دهید:
<div style="font-family:'Arial Black', Gadget, sans-serif; color:#CCC; font-size:14px; font-weight:bold;" id=BlogTitle>نوشته هاي جالب</div>
البته این فقط یک نمونه است، برای تنظیمات بیشتر باید با استایل css آشنا باشید.
نویسنده: amir
زمان: ۱۶:۵۶:۳۹ - تاریخ: ۱۳۹۱/۰۸/۲۸
خیلی ممنون استفاده کردم به منم یک سری بزن
نویسنده: ps
زمان: ۱۵:۴۳:۲۶ - تاریخ: ۱۳۹۱/۰۹/۱۳
سلام
من به فایل css دسترسی ندارم آیا راهی دیگری هم هست که بتونم تصویرش رو عوض کنم
ممنون
پاسخ: 
سلام
بله، می توانید از استایل خطی برای عناصر استفاده کنید، به طور مثال:
<div style="background-image:url(bg.jpg);"></div>
نویسنده: MohaMad
زمان: ۱۲:۲۴:۱۷ - تاریخ: ۱۳۹۱/۰۹/۱۷
سلام. ببخشید می خواستم برای پس زمینه یه عکس بزارم. ولی هر کاری می کنم نمیشه. میشه دقیقا بگین چی کار کنم. ممنون.
پاسخ: 
سلام
برای ویرایش و اعمال تغییرات ظاهری در وبلاگ، باید با اصول کدهای html و استایل css آشنایی داشته باشید، سپس یا تصویر پس زمینه از طریق فایل css قالب یا از طریق تگ body یا سایر تگ های div قابل تغییر است.
نویسنده: سحر
زمان: ۱۸:۳۳:۲۹ - تاریخ: ۱۳۹۱/۰۹/۲۴
سلام. من تازه واردم و با html چندان آشنایی ندارم. بنابر این از قالب آماده برای وبلاگم استفاده کردم. حالا ممکنه کمک کنید من در این قالب آماده تصویر زمینه و همچنین زمینه عنوان رو تغییر بدم. فکر می کنم این کد با css طراحی شده. من قسمت css رو از داخل کد پیدا کردم و اگه درست باشه تونستم بازش کنم:
<link href="http://farsiaddons.com/theme/rahbar1/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://farsiaddons.com/code.js"></script>
ولی نمی دونم چجوری پس زمینه رو تغییر بدم. این بخشی از کد html این قالب آماده هست که در بخش head بود.
ممنون میشم راهنماییم کنید زمینه و عنوان را تغییر بدم
پاسخ: 
سلام
برای ویرایش قالب های آماده باید فایل css آن را پیدا کنید که شما این کار را انجام داده اید، سپس با توجه به هدفتان به دنبال عنصر مشخص باشید و آن را ویرایش کنید، به طور مثال در اینجا برای تصویر زمینه از تگ body و یک کلاس برای آن با عنوان body1 استفاده شده است، لذا در فایل css خاصیت های مربوط به body1 را تغییر دهید، پس از اعمال تغییرات باید آن را آپلود کرده و مجددا فایل را در قالب به جای فایل css قبلی آدرس دهی کنید. اگر می خواهید راه ساده تر باشد، همین کار را با تعریف استایل خطی برای تگ body می توان انجام داد، به طور مثال:
<body class="body1" style="background:#000000 url('img/bg.jpg') no-repeat fixed center top; margin-top:0; margin-bottom:0;">
در اینجا چون استایل خطی بر استایل ایمپورت شده مقدم است، مرورگر تصویر زمینه تنظیم شده شما را نشان خواهد داد، در مورد زمینه عنوان هم باید ببینید از چه عنصری و با چه کلاسی استفاده شده است، سپس همان کلاس را در فایل css پیدا کنید و ویژگی های آن را تغییر دهید که راه ساده تر آن هم تعریف استایل به صورت خطی است، به طور مثال:
<div class="title" style="text-align: right; direction: rtl; text-decoration: none; font-size: 12pt;"></div>
نویسنده: ناشناس
زمان: ۲۲:۳۴:۳۲ - تاریخ: ۱۳۹۱/۱۰/۰۳
چگونه قالب را عریض کنیم؟
مثلا عکسی که پست کرده ایم در آن جا نمی شود
پاسخ: 
برای تغییر در قالب باید بر html تسلط و با css آشنایی نسبی داشته باشید، سپس می توانید سورس قالب را ویرایش کنید، در غیر این صورت بهتر است از تصویر کوچکتری استفاده کنید.
نویسنده: g.m
زمان: ۱۲:۵۱:۵۶ - تاریخ: ۱۳۹۱/۱۰/۰۸
سلام ، خسته نباشید ، منم مشکل بقیه دوستان رو تو تغییر تصویر زمینه دارم ، مطالبتون خوندم خیلی مفید بودند ، ممنون .
اما بازم نتونستم مشکلم رو حل کنم ، قالب بهم می ریزه ،،،
فایل Css هم پیدا کردم ، تغییرات لازم روش میدم اما قالب بهم میریزه .
این فایل قالب هستش :
http://s3.picofile.com/file/7599691177/ghaleb_shad.txt.html 
می خواستم اگه میشه بخش که باید تغییر داد مشخص کنید .
بازم ممنون .
پاسخ: 
سلام
باید تصویر 378 موجود در کلاس page را تغییر دهید، یعنی این تصویر:
http://avazak.ir/Theme/style/image/378.jpg
نویسنده: یونس
زمان: ۱۲:۳۶:۵۱ - تاریخ: ۱۳۹۱/۱۰/۲۴
چگونه می شود قالب وبلاگ را عوض کنیم
پاسخ: 
برای انتخاب قالب های پیش فرض، در قسمت مدیریت وبلاگ، بخش ویرایش قالب می تواند موارد دیگری را انتخاب کنید، در همین قسمت هم می توانید از کدهای HTML قالب های رایگان نیز استفاده نمائید.
paged صفحه 1 از 4




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

8 × 2
 refresh
آپلود رایگان عکس و فایل
آگهی
parandsms.com
تفاوت
tafavot.net

تفاوت دات نت
پنل پیامک
elitsms.ir

سامانه پیام کوتاه
طراحی وب سایت
nemov.net

ارزان و با کيفيت
آموزش طراحی سایت
onliner.ir

فیلم های آموزشی رایگان