بک گراند در css به یکی از روش های زیر تعیین می شود:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
ویژگی background-color در css مشخص کننده رنگ پس زمینه آن المان است. رنگ پس زمینه کل صفحه به این صورت تعیین می شود:
body {
background-color: lightblue;
}
در css معمولا به یکی از روش های زیر رنگ می دهیم:
- با استفاده از نام رنگ مثل
Red با استفاده از روش HEX مثلff0000 #با استفاده از روش RGB مثل (rgb(255,0,0
در مثال زیر، به المان های h1 و p و div رنگ های پس زمینه متفاوتی داده ایم:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Background Image
در این نوع بک گراند در css ، تصویری را به عنوان پس زمینه المان انتخاب می کنیم. در حالت پیش فرض، این تصویر تکرار می شود و صفحه را پر می کند. به مثال زیر دقت کنید:
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<p>Example of background-image with repeat property.</p>
</body>
</html>
Repeat Horizontally و Repeat Vertically
در حالت پیش فرض، یک تصویر بک گراند در css ، هم به صورت افقی (Horizontally) و هم به صورت (Vertically) تکرار می شود.
چنانچه بخواهیم تصویر فقط به صورت افقی تکرار شود، این کد را وارد می کنیم:
;background-repeat: repeat-x
و اگر بخواهیم در جهت عمودی تکرار شود، این کد را:
;background-repeat: repeat-y
no-repeat
اگر بخواهیم که از تصویر پس زمینه تنها یک عدد داشته باشیم و هیچ گونه تکراری نداشته باشد، این کد را وارد می کنیم:
;background-repeat: no-repeat
در این حالت، مکان تصویر به صورت پیش فرض در مکان متن قرار می گیرد. می توانیم با استفاده از کد زیر، مکان تصویر پس زمینه را تغییر دهیم:
;background-position: right top
نکته: اگر بخواهیم تصویر پس زمینه ثابت باشد و با اسکرول کردن صفحه، مکانش ثابت باشد و جابجا نشود، کد زیر را به کار می بریم:
;background-attachment: fixed
مختصر نویسی کد بک گراند در css
به قطعه کد زیر دقت کنید:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
این کد را می توانیم به صورت زیر خلاصه نویسی کنیم:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
ترتیب قرار گرفتن خلاصه موارد بک گراند در css به صورت زیر می باشد:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
برگرفته از وب سایت w3schools.com
دیدگاه بگذارید