Omega Programming

پس زمینه در css

با استفاده از ویژگی background می توان پس زمینه هر عنصری را تعیین کرد.

Background Color

این ویژگی رنگ پس زمینه یک عنصر را تعیین می کند. مثال زیر رنگ پس زمینه یک صفحه را تعیین کرده است. چون می خواهیم پس زمینه کل صفحه تغییر کند از ویژگی background در تگ body استفاده کرده ایم.

body {
    background-color: #b0c4de;
}

می توان ویژگی رنگ را با روش های زیرمقدار دهی کرد:

مقادیرمبنای 16 مانند:  "#ff0000"

مقادیر rgb مانند: "rgb(255,0,0)"

مقداردهی با استفاده از نام رنگ مانند: "red"

در مثال زیر عناصر مختلف رنگ پس زمینه متفاوت دارند:

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

Background Image

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

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

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

به صورت پیش فرض ویژگی background image تصاویر را هم بصورت افقی و هم عمودی تکرار می کند. لازم است برخی تصاویر فقط به صورت عمودی یا فق افقی تکرار شوند. برای تعیین نوع تکرار یک تصوری پس زمینه از ویژگی background-repeat استفاده می شود. اگر بخواهیم تصویر فقط به صورت افقی تکرار شود (repeat-x) به صورت زیر عمل می کنیم.

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

}

برای تکرار به صورت عمودی از repeat-y استفاده می شود.اگر بخواهیم تصویر فقط یکبار (بدون تکرار) ظاهر شود ویژگی   background-repeat را برابر no-repeat قرار می دهیم.

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

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

 

شما اینجا هستید: صفحه ی اصلی آموزش ها آموزش CSS آموزش CSS پس زمینه در css