ویژگی background-color در CSS
ویژگی background-color در CSS رنگ پس زمینه یک عنصر HTML را مشخص می کند.
مثال
رنگ پس زمینه یک عنصر به صورت زیر تنظیم می شود، در اینجا رنگ پس زمینه صفحه به رنگ آبی روشن درآمده است:
background-color: lightblue;
}
در CSS اغلب، رنگ ها به شکل های زیر تعریف می شود:
- نام یک رنگ معتبر - مانند "red" (قرمز)
- مقدار هگزادسیمال (HEX) - شبیه این: "#ff0000"
- مقدار RGB - شبیه این: "(rgb(255,0,0"
برای یادگیری بیشتر درباره رنگ ها مقاله آموزش رنگ ها در CSS را مطالعه کنید.
مثال
در مثال زیر هر یک از عناصر <h1>, <p> و <div> رنگ پس زمینه متفاوتی خواهند داشت:
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
ویژگی background-image در CSS
ویژگی background-image در CSS عکس پس زمینه یک عنصر HTML را مشخص می کند.
به طور پیشفرض عکس پس زمینه برای یک عنصر HTML تکرار می شود تا همه ی فضای پس زمینه یک عنصر را اشغال کند:
مثال
تصویر پس زمینه می تواند به صورت زیر برای یک صفحه HTML تنظیم شود:
background-image: url("paper.gif");
}
مثال
مثال زیر یک ترکیب بد از متن و تصویر را نشان می دهد که در آن متن به سختی قابل خواندن است:
background-image: url("bgdesert.jpg");
}
نکته: وقتی که از تصویر پس زمینه استفاده می کنید، از تصاویری استفاده کنید که به خوانایی متن لطمه نزند.
ویژگی background-repeat در CSS
به طور پیشفرض ویژگی background-image یک تصویر را به صورت افقی و عمودی تکرار می کند تا همه ی فضای پس زمینه یک عنصر را اشغال کند.
گاهی لازم است که بعضی از تصاویر فقط به صورت عمودی یا افقی تکرار شوند در صورت تکرار تصویر هم به صورت افقی و هم به صورت عمودی نتیجه عجیب خواهد شد، مانند مثال زیر:
اگر تصویر بالا فقط به صورت افقی background-repeat: repeat-x; تکرار شود، تصویر پس زمینه بهتر به نظر می رسد:
مثال
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
نکته: برای تکرار تصویر پس زمینه به صورت عمودی از مقدار background-repeat: repeat-y; استفاده کنید.
ویژگی background-repeat: norepeat در CSS
برای نمایش تصویر پس زمینه بدون تکرار شدن عمودی و افقی از ویژگی background-repeat به این صورت استفاده می شود:
مثال
تصویر پس زمینه در این مثال بدون تکرار نمایش داده می شود:
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
ویژگی background-position در CSS
در مثال بالا تصویر پس زمینه در همان مکان متن قرار می گیرد و ممکن است باعث ناخوانایی متن شود. برای حل این مشکل و قرار دادن عکس در مکانی دلخواه از ویژگی background-position استفاده می شود.
مثال
در مثال زیر مکان قرار گیری عکس گوشه بالا سمت راست تعیین شده است:
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
ویژگی background-attachment در CSS
ویژگی background-attachment مشخص می کند که تصویر پس زمینه اسکرول شود (scroll) و یا با صفحه فیکس (fixed) شود.
مثال
در مثال زیر مقدار ویژگی background-attachment برابر fixed قرار داده شده و باعث فیکس شدن تصویر پس زمینه با صفحه شده است:
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
مثال
در مثال زیر مقدار ویژگی background-attachment برابر scroll قرار داده شده و باعث شده که تصویر پس زمینه در جای خود ثابت بماند و همراه با اسکرول شدن صفحه تکان نخورد:
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
ویژگی background در CSS - برای مختصر نویسی
برای کوتاه نویسی در کد ها، می توان تمام ویژگی های پس زمینه را در یک ویژگی واحد جمع کرد. این خاصیت به اصطلاح مختصر نویسی (shorthand) نامیده می شود.
برای مختصر نویسی (shorthand) پس زمینه ها باید از ویژگی background به صورت زیر استفاده کرد:
مثال
با استفاده از خاصیت مختصر نویسی (shorthand) تمام خصوصیات پس زمینه را با هم استفاده کنید:
background: #ffffff url("img_tree.png") no-repeat right top;
}
در هنگام استفاده از خاصیت مختصر نویسی (shorthand) ترتیب مقادیر مختلف پس زمینه ها به صورت زیر است:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
می توان از هر یک از مقادیر بالا چشم پوشی کرد یعنی می توان از هر پنج مورد، سه مورد، و یا حتی یک مورد استفاده کرد. اما ترتیب اولویت در مواردی که از آن ها استفاده می شود را باید رعایت کرد.