پس زمينه در CSS

صفات پس زمینه در CSS برای تعریف افكت های پس زمینه عناصر استفاده می شود.
 

صفات پس زمینه CSS :

background-color
background-image
background-repeatbackground-attachmentbackground-position

رنگ پس زمینه

background-color رنگ پس زمینه  یك عنصر را مشخص می كند. رنگ پس زمینه صفحه بصورت زیر تنظیم می شود.

مثال :

پس زمینه
body {
    background-color: lightblue;
}
مشاهده مثال


تعیین رنگ ها در CSS معمولا به 3 روش زیر امكان پذیر است :‌

یك نام رنگ معتبر - red
یك مقدار هگزادسیمال از رنگ ها - ff0000 #
یك مقدار RGB از رنگ ها - rgb(255,0,0)

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

مثال :

رنگ زمینه اختصاصی
h1 {
    background-color: red;
}

div {
    background-color: lightgray;
}

p {
    background-color: orange;
}
مشاهده مثال


 

تصویر پس زمینه

background-image تصویری به عنوان پس زمینه را برای عناصر HTML مشخص می كند. بطور پیش فرض تصویر تكرار می شود تا تمام سطح عنصر رو بپوشاند. تصویر پس زمینه را می توان به طریق زیر تنظیم كرد :

مثال :

تصویر زمینه
body {
    background-image: url("paper.gif");
}
مشاهده مثال


مثال زیر نمونه ای از انتخاب نادرست تصویر پس زمینه نسبت به متن است. متن تقریبا غیرقابل خواندن است.

مثال :

انتخاب نادرست تصویر زمینه
body {
    background-image: url("bgdesert.jpg");
}
مشاهده مثال
 


نكته !‌ تصویر پس زمینه را به نحوی انتخاب كنید كه متن را ناخوانا نكند.

 

تكرار تصویر پس زمینه - عمودی یا افقی ؟؟

بطور پیش فرض ،‌تكرار تصویر در پس زمینه در هر دو حالت عمودی و افقی اتفاق می افتد. برخی تصاویر را می خواهیم فقط افقی یا فقط عمودی تكرار كنیم.

مثال :

تکرار تصویر زمینه
body {
    background-image: url("gradient_bg.png");
}
مشاهده مثال
 

اگر تصویر مثال بالا فقط افقی تكرار شود ( با استفاده از ;background-repeat: repeat-x) ،‌ نمای بهتری خواهد داشت.

مثال :
تکرار صحیح تصویر زمینه
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
مشاهده مثال
 

نكته ! برای تكرار یك تصویر به صورت عمودی از كد روبرو استفاده كنید ;background-repeat: repeat-y

 

تنظیم موقعیت تصویر و عدم تكرار

برای نشان دادن تصویر بدون تكرار از صفت background-repeat استفاده می شود

مثال :

عدم تکرار تصویر زمینه
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}
مشاهده مثال
 

در مثال بالا تصویر درست در همان محل كه متن قرار دارد نمایش داده شده است. برای تغییر موقعیت تصویر و عدم تداخل با متن از صفت background-position استفاده می كنیم.

مثال :
عدم تکرار تصویر زمینه و موقعیت مناسب
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}
مشاهده مثال
 

 

موقعیت ثابت تصویر پس زمینه

برای تنظیم موقعیت تصویر بصورت ثابت (به هنگام اسكرول صفحه ،‌تصویر همچنان در همان موقعیت نمایش داده شود) از صفت background-attachment استفاده می كنیم.

مثال :

موقعیت ثابت تصویر
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
مشاهده مثال
 

 

كوتاه نویسی كد ها

برای كوتاه كردن كد ها امكان مشخص كردن صفات در یك صفت وجود دارد. به این صفت مختصرشده (shorthand)می گویند. صفت مختصرشده برای پس زمینه background می باشد.

مثال:

خلاصه نویسی کد پس زمینه
body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}
مشاهده مثال
 

به هنگام استفاده از صفت مختصر شده باید ترتیب زیر را برای مقادیر صفات رعایت كنید :

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


مهم نیست چند مورد را استفاده كنید. مهم ترتیب قرار دادن مقادیر است.

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط