Background ها در CSS

انواع background

 صفت background-color

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

body {
    background-color: lightblue;
}

در CSS ، یک رنگ اغلب به شکل های زیر مشخص میشود :

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

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

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

صفت background-image

صفت background-image یک تصویر را به عنوان تصویر پشت زمینه ی یک عنصر مشخص میکند. به صورت پیشفرض، تصویر آنقدر تکرار خواهد شد تا فضای کل عنصر را پوشش دهد.

صفت background-image برای یک صفحه به صورت زیر تنظیم میشود :

body {
    background-image: url("paper.gif");
}

در نمونه مثال یک نمونه بد از ترکیب متن و تصویر پشت زمینه آورده شده است. در این مثال متن به سختی قابل خواندن است :

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

Background Image - تکرار به صورت افقی و عمودی

به صورت پیشفرض صفت background-image یک تصویر را هم به صورت افقی و هم به صورت عمودی تکرار میکند. بعضی از تصاویر نیاز است تنها به صورت افقی و یا به صورت عمودی تکرار شوند در غیر این صورت نتیجه جالب نخواهد بود :

body {
    background-image: url("gradient_bg.png");
}

اگر تصویر بالا تنها به صورت افقی تکرار شود ( ;background-repeat: repeat-x ) ، تصویر background بهتر به نظر خواهد رسید :

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

Background Image - تنظیم صفات position و no-repeat

نمایش تصویر background تنها یک بار و بدون تکرار در جهات افقی و عمودی، توسط صفت background-repeat انجام میپذیرد :

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

در مثال ذکر شده در بالا تصویر background در همان مکانی که متن نمایش داده میشود قرار میگیرد. ما میخواهیم مکان تصویر را تغییر دهیم تا به خوانایی متن آسیبی وارد نشود.

مکان یک تصویر توسط صفت background-position تعیین میشود. در نمونه مثال زیر مکان تصویر سمت راست و بالا در نظر گرفته شده است :

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

Background Image - مکان ثابت برای تصویر

برای اینکه تصویر background ثابت بماند و با ادامه ی صفحه اسکرول نخورد از صفت background-attachment استفاده میشود.

نحوه ی استفاده از این صفت در نمونه کد زیر مشخص شده است :

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

Background - صفت کوتاه شده

برای کوتاه نویسی در کد، این امکان وجود دارد که تمام صفات background را در یک صفت گنجاند که به این صفت ، صفت shorthand (کوتاه شده) میگویند. نمونه مثال زیر نحوه ی استفاده از صفت کوتاه شده برای صفات background را نشان میدهد :

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

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

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

میتوان از هرکدام از مقادیر صفات در صفت کوتاه شده ی background چشم پوشی کرد مادامی که اولویت در بقیه مقادیر همچنان حفظ شده باشد.