به جلسه ی هفتم از سری جلسات آموزش CSS افق وب خوش آمدید. در این جلسه می خواهیم شما را با ویژگی Background در CSS آشنا کنیم. برای دسترسی به جلسه پنجم کافیه از لینک قرار داده شده استفاده کنید. پیشنهاد ما این است که تمام جلسات را پشت سر هم مطالعه کنید و تمرین و تکرار را برای یادگیری بیشتر فراموش نکنید.

ویژگی Background در CSS

از این ویژگی برای ایجاد پس زمینه عناصر استفاده می شود. این پس زمینه ممکن است رنگ یا تصویر باشد در ادامه به معرفی انواع مختلف ویژگی های پس زمینه می پردازیم و نحوه ی استفاده و کارایی آنها را با مثال برای شما مطرح خواهیم کرد. با ما همراه باشید.

انواع پس زمینه ها

در حالت کلی 5 نوع پس زمینه وجود دارد؛

background-color
background-image
background-repeat
background-attachment
background-position

هر کدام از این پس زمینه ها ویژگی هایی را به عناصر موجود در صفحه اضافه می کنند که در ادامه به مثال هایی از آنها نگاهی میندازیم.

background-color

این خاصیت رنگ پس زمینه ی عنصر مورد نظر را تغییر میدهد. برای مثال کد زیر امکان تغییر رنگ بدنه ی سایت را فراهم می کند؛

body {background-color:#b0c4de;}

عناصر < p> ، <h1> و <div> در مثال های زیر رنگ پس زمینه دریافت می کنند؛

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}

در CSS رنگ ها را میتوان با روش های زیر برای یک عنصر اعمال کرد؛

روش اول اینکه از نام رنگ استفاده کنیم مانند؛ red , blue , green و…
روش دوم استفاده از هگزادسیمال است مثلا #f00000
روش سوم قرار دادن یک مقدار RGB است.مثلا (255 0 0) rgb
روش چهارم استفاده از SHL است مانند hsl(0deg 100% 50%)

هر چهار روش بالا رنگ قرمز را نشان میدهد.

background-image

با استفاده ازاین ویژگی می توانیم یک تصویر پس زمینه دلخواه, برای عنصر مورد نظر انتخاب کنیم. مثال زیر نمونه ای از این ویژگی برای ایجاد یک تصویر است؛

body {background-image:url(‘path/flower.png‘);}

تصویر انتخابی به طور پیش فرض آنقدر تکرار می شود تا تمام پس زمینه ی عنصر مورد نظر را بپوشاند.

نکته 01؛

دقت کنید که در url باید آدرس تصویر مورد نظر قرار داده شود. اگر تصویر در مسیر دیگری غیر از مسیر فایل CSS بود باید آدرس مسیر تصیر در url قرار داده شود.

نکته02؛

برای انتخاب تصویر مورد نظر دقت لازم را داشته باشید چون تاثیر زیادی در خوانایی متن شما خواهد داشت. یک تصویر بد با رنگ های نامناسب میتواند متن شما را غیر قابل خواندن ، کند و چشم کاربر را خسته کند.

background-repeat

از این ویژگی برای تکرار تصویر انتخابی در پس زمینه استفاده میشود. مثلا اینکه تصویر به صورت افقی یا عمودی تکرار شود یا اصلا تکرار نشود. حتی میتوان با استفاده از این ویژگی کاری کرد که تصویر فقط در راستای افقی یا در راستای عمودی تکرار شود.

body
{
background-image:url(‘gradient2.png‘);
background-repeat:repeat-x; /*تکرار در راستای افقی*/
/* background-repeat:repeat-x; تکرار در راستای عمودی */
}

مثال زیر نمونه ای از عدم تکرار تصویر است؛

body
{
background-image:url(‘img_tree.png‘);
background-repeat:no-repeat; /*بدون تکرار*/
}

background-position

حالا تصویر کنید که تصویر شما در جای مناسبی نیست یا اینکه دقیقا زیر متن قرار دارد و شما برای خوانایی بیشتر می خواهید آن را جا به جا کنید. در این صورت از ویژگی background-position استفاده می کنیم . اما به چه صورت؟ نگاهی به مثال های زیر بیندازید و سعی کنید آن ها را به خاطر بسپارید؛

body {
background-image: url(“flower.png“);
background-repeat: no-repeat;
background-position: right top;
}

background-attachment

با استفاده از این ویژگی میتوان حالت تصویر پس زمینه را تعیین کرد مثلا می تواند ثابت باشد یا در حالت اسکرول باشد.ثابت این است که با اسکرول کردن صفحه پس زمینه ثابت می ماند و در حالت اسکرول همزمان با اسکرول صفحه پس زمینه نیز اسکرول می شود.
به مثال زیر نگاه کنید؛

body {
background-image: url(“flower.png“);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
/*background-attachment: scroll;*/

}

background-size

با این ویژگی می توانید اندازه ی پس زمینه را تغییر دهید به مثال زیر توجه کنید:

div
{
height:600px;
background-image: url(“flower.png“);
background-repeat: repeat;
background-attachment: fixed;
background-size: 100px;
}

ترتیب قرار گرفتن این ویژگی ها

ترتیب قرارگیری این ویژگی ها اهمیتی ندارد اما یک روش بهینه و اصولی برای نوشتن کدهای CSS این است که به جای جدا نوشتن هر یک از حالت ها آن ها را در یک خط در ویژگی background بنویسیم.

body {
background-color: #ffffff;
background-image: url(“img_tree.png“);
background-repeat: no-repeat;
background-position: right top;
}