تغییر رنگ و تصویر پس زمینه در CSS

علیرضا حاتمی نیا 11388

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

تغییر رنگ و تصویر زمینه صفحه در گذشته

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

خصوصیت background در css

در CSS برای تغییر رنگ و تصویر زمینه صفحه و دیگر از اجزا از 5 خصوصیت استفاده می کنند

1.  background-color
2.  background-image
3.  background-repeat
4.  background-attachment
5.  background-position

خصوصیت  background-color

برای تغییر رنگ پس زمینه از خصوصیت background-color استفاده می کنند. مقدار این خصوصیت می تواند نام رنگ، کد رنگ به صورت rgb و یا کد رنگ به صورت هگزا دسیمال باشد.

مثال برای background-color

h1 {background-color: #6495ed;}
p {background-color: red;}
div {background-color: rgb(200,50,90);}

خصوصیت background-image

برای تغییر رنگ پس زمینه از خصوصیت background-image استفاده می شود. کافیست آدرس تصویر مورد نظر را در یک url به عنوان مقدار این خصوصیت تعیین کنید.

body {
background-image: url("image2.jpg ");

توجه داشته باشید که تصویر انتخابی به صورت پیش فرض در محور x و y تکرار می شود.

اما جهت تغییر این روند چه باید کرد ؟ یا مثلا برای عدم تکرار عکس یا تکرار عکس فقط در محور x یا فقط تکرار در محور Y؟

خصوصیت background-repeat

برای عدم تکرار تصویر پس زمینه کافیست مقدار background-repeat را برابر no-repeat قرار دهید:
 

background-image: url("image2.jpg ");
background-repeat: no-repeat;

برای تکرار تصویر زمینه فقط در محور x مقدار background-repeat را برابر repeat-x قرار دهید:

background-image: url("image2.jpg ");
background-repeat: repeat-x;

برای تکرار تصویر زمینه فقط در محور y مقدار background-repeat را برابر repeat-y قرار دهید:

background-image: url("image2.jpg ");
background-repeat: repeat-y;

خصوصیت background-position

برای تغییر مکان تصویر زمینه در وب از خصوصیت background-position استفاده می کنیم . مقادیری که این خصوصیت می تواند داشته باشد به صورت زیر است :
تصویر با استفاده از عبارات کلیدی left, right,bottom,top,csnter روی محور x و y تغییر وضعیت می دهد.

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

روی محور x و y با مقادیر درصد تغییر وضیعت می دهد.

x% y%

با استفاده از مقادیر به صورت اندازه ای (مثلا پیکسل) روی محور x و y تغییر وضعیت می دهد.

xpos ypos

مقدار پیش فرض انتخاب می شود.

Initial

خوصیت والد خود را به ارث می برد

Inherit

مثال:

background-image: url("image2.jpg ");  
background-repeat: no-repeat;
background-position: right top;

خصوصیت  background-attachment

برای ثابت نگه داشتن تصویر زمینه در صفحات scroll دار می توانید از خصوصیت background-attachment استفاده کنید. مقدار پیش فرض این خصوصیت scroll می باشد که برای ثابت کرد تصویر پس زمینه بایستی مقدار این خصوصیت را fixed کنید.

background-image: url("image2.jpg ");
background-repeat: no-repeat;
background-attachment: fixed

ترتیب نوشتن مقادیر به صورت زیر است:

1.  background-color
2.  background-image
3.  background-repeat
4.  background-attachment
5.  background-position

نکته : می توانید مقادیر دلخواه را حذف نمایید ولی ترتیب نوشتن آن ها حتما باید رعایت شود.

کلمات کلیدی

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت