CSSسفارشی سازی پس زمینه در
تنظیمات مربوط به پس زمینه شامل: رنگ پس زمینه، تصویر پس زمینه، تعداد دفعات تکرار پس زمینه و موقعیت قرارگیری است.
تعیین رنگ پس زمینه
به منظور تعیین رنگ سفارشی برای پس زمینه صفحه وبسایت باید برای body رنگ تعیین کرد.
مثال:
<html> <head> <style> body { background-color: lightblue; } </style> </head> <body>
<h1>Hello World!</h1> <p>This page has a light blue background color!</p> </body> </html>HTMLتعیین رنگ پس زمینه عناصر
علاوه بر پس زمینه کل صفحه میتوان برای اجزای مختلف html از جمله تیتر، پاراگراف و… نیز رنگ پس زمینه تعیین کرد. در مثال زیر نحوه رنگی کردن پس زمینه تیتر، پاراگراف و یک بخش از صفحه (div) را نشان داده ایم.
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
لازم به ذکر است که علاوه بر تعیین رنگ پس زمینه با استفاده از ویژگی opacity میتوان میزان شفافیت (transparency) را مشخص کرد یا با استفاده از فرمت RGBA میزان آلفا که همان میزان شفافیت است را تعیین کرد.
مثال:
div {
background-color: green;
opacity: 0.3;
}
CSSقرار دادن تصویر پس زمینه با استفاده از
ممکن است بخواهیم تصویری را به عنوان پس زمینه در صفحه وبسایت قرار دهیم. در این حالت مانند مثال باید از background-image استفاده کنیم.
- توجه کنید که میتوان پس زمینه را مختص برخی عناصر html مانند پاراگراف، تیتر و یا div تعریف کرد.
<html> <head> <style> body { background-image: url(“myimage.jpg”); } </style> </head> <body>
<h1>Hello World!</h1>
</body> </html>
تکرار تصویر پس زمینه
تصاویری که در پس زمینه قرار میدهیم میتوانند به صورت عمودی یا افقی تکرار شوند که برای این کار از دستور background-repeat با مقدار repeat-x برای تکرار عمودی و repeat-y برای تکرار افقی باید استفاده کنیم.
body {
background-image: url(“myimage.jpg”);
background-repeat: repeat-x;
}
اما اگر میخواهید تصویر بدون تکرار نمایش داده شود از دستور no-repeat استفاده کنید.
background-repeat: no-repeat;
تعیین محل قرارگیری تصویر
برای تعیین محل قرارگیری تصویر (position) داخل صفحه سایت باید از ویژگی background-position استفاده کرد و مقدار آن را top, bottom, left, right و یا ترکیبی از آن ها مثلا top left قرار داد.
اگر قصد دارید تصویری که گذاشته اید روی صفحه fix شود و هنگام scroll صفحه، تصویر همچنان ثابت باشد باید از background-attachment: fixed استفاده کنید ولی اگر میخواهید با scroll کردن صفحه تصویر نیز حرکت کند از background-attachment: scroll استفاده کنید البته لازم به ذکر است که به صورت پیش فرض تصاویر در حالت scroll هستند.
body { background-image: url(“myimage.jpg”); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }