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

1395/9/24 علیرضا حاتمی نیا 4603

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

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

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

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

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

 

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

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

 

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


توجه داشته باشید که تصویر انتخابی به صورت پیش فرض در محور x و y تکرار می شود. اما جهت تغییر این روند چه باید کرد ؟
مثلا برای عدم تکرار عکس یا تکرار عکس فقط در محور x یا فقط تکرار در محور Y  ؟

3-  خصوصیت 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;

4-  خصوصیت 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;

5-  خصوصیت  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

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

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

دانلود PDF قسمت چهاردهم آموزش طراحی وب

دانلود ویدیو

کلمات کلیدی

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