یکی از ویژگی‌هایی که به سایت‌ها زیبایی می‌بخشد، طراحی زیبا و منحصربه‌فرد پس زمینه سایت می‌باشد. ما می‌توانیم با ایجاد تغییرات مناسب در پس زمینه، سایت مان را جذاب کنیم. در واقع هم می‌توانیم تنها رنگ پس زمینه را تغییر دهیم و هم اینکه تصویری را به عنوان پس زمینه انتخاب کنیم و با اعمال کردن تغییرات مناسب، صفحه‌مان را زیبا کنیم.
استفاده از پس زمینه (بکگراند) رنگی با کمک CSS
Background به معنای پس زمینه است. پس برای تغییر رنگ پس زمینه فقط کافی ست از background-color استفاده کنیم. سپس رنگ مورد نظر را به آن بدهیم، به صورت زیر:
Background-color : blue ;
نکته مهمی‌که وجود دارد این است که ما می‌توانیم از این ویژگی برای هر تگ و عنصری استفاده کنیم و تنها مختص پس زمینه ی کل صفحه نیست.
به عنوان مثال هم می‌توانیم پس زمینه ی body و هم می‌توانیم پس زمینه ی المانی مانند p را تغییر دهیم. در هر صورت فقط کافی ست عنصر مورد نظر را به عنوان سلکتور انتخاب کنیم. به عنوان مثال اگر بخواهیم رنگی را برای پس زمینه ی تمام صفحه انتخاب کنیم به شکل زیر می‌نویسیم:
body{
background-color: cadetblue;
}
اگر بخواهیم فقط رنگ پس زمینه پاراگراف را تغییر دهیم، به صورت زیر می‌نویسیم:
p{
background-color: cadetblue;
}
استفاده از تصویر (عکس) در Background در CSS
حال اگر بخواهیم یک تصویر را به عنوان پس زمینه انتخاب کنیم باید از دستور زیر استفاده کنیم:
background-image: url( آدرس تصویر نسبت به فایل سی اس اس );
همانطور که می‌بینید درون پرانتز باید آدرس تصویری که می‌خواهیم آن را به عنوان پس زمینه انتخاب کنیم قرار دهیم. چون دستور را درون فایل css نوشته‌ایم، پس آدرس تصویر را نسبت به موقعیت فایل سی اس اس می‌نویسیم. در ادامه به چند نکته در مورد تصویر پس زمینه اشاره می‌کنیم.
فرض کنید ابعاد تصویری که می‌خواهیم به عنوان پس زمینه استفاده کنیم کوچک است. در این صورت می‌بینید که به صورت پیش فرض تصویرمان تکرار می‌شود. ما می‌توانیم این ویژگی را به دلخواه خودمان تغییر دهیم. مثلا می‌توانیم از دستور background-repeat: repeat-x; استفاده کنیم تا تصویر ما فقط در جهت محور افقی تکرار شود. یا اینکه می‌توانیم از دستور background-repeat: repeat-y; استفاده کنیم تا تصویر در جهت عمودی تکرار شود. توجه کنید که حالت پیش فرض تصویر در هر دو جهت افقی و عمودی تکرار می‌شود.
همچنین ما می‌توانیم از مقدار no-repeat برای این خصوصیت استفاده کنیم تا تصویر ما تکرار نشود.
موقعیت تصاویر و سی اس اس (CSS)
نکته دیگری که باید به آن اشاره کنیم مربوط به موقعیت تصویر است. در همان حالت قبلی که تصویرپس زمینه مان کوچک است، اگر توجه کنید پس زمینه به صورت پیش فرض در سمت چپ و بالای صفحه قرار گرفته است. ما می‌توانیم این موقعیت تصویر را به دلخواه خودمان تغییر دهیم. برای این کار از دستور background-position استفاده می‌کنیم. مقادیری که این خصوصیت می‌تواند بگیرد در زیر آمده اند:
left top به منظور بالا و چپ
left center به منظور وسط و چپ
left bottom به منظور پایین و چپ
right top به منظور راست و بالا
right center به منظور وسط و راست
right bottom به منظور راست و پایین
center top به منظور وسط و بالا
center bottom به منظور وسط و پایین
center center به منظور وسط
به عنوان مثال اگر بخواهیم تصویر پس زمینه در سمت راست و وسط صفحه قرار بگیرد به صورت زیر می‌نویسیم:
background-position: right center;
اگر به صفحه ی خود یک تصویر پس زمینه بدهیم و اسکرول کنیم به صورت پیش فرض با اسکرول کردن ما، تصویر پس زمینه هم حرکت می‌کند. ما می‌توانیم از دستور زیر استفاده کنیم و به آن مقدار fixed بدهیم تا تصویر پس زمینه در حالت اسکرول کردن ثابت بماند.
Background-attachment: fixed;
