سری مقالات آموزش CSS – پس زمینه -css background image- تصویر پس زمینه در css
تصویر پس زمینه CSS
خاصیت background-image تصویری را مشخص می کند که به عنوان پس زمینه یک عنصر استفاده شود.
به طور پیش فرض ، تصویر تکرار می شود بنابراین کل عنصر را پوشش می دهد.
مثال
تصویر پس زمینه را برای یک صفحه تنظیم کنید:
body {
background-image: url("paper.gif");
}مثال
این مثال ترکیبی بد از متن و تصویر پس زمینه را نشان می دهد. متن به سختی قابل خواندن است:
body {
background-image: url("bgdesert.jpg");
}توجه: هنگام استفاده از تصویر پس زمینه ، از تصویری استفاده کنید که مزاحمت متن نباشد.
تصویر پس زمینه همچنین می تواند برای عناصر خاص تنظیم شود ، مانند عنصر <p> :
مثال
p {
background-image: url("paper.gif");
}تکرار پس زمینه CSS
به طور پیش فرض ، ویژگی تصویر پس زمینه تصویری را به صورت افقی و عمودی تکرار می کند.
بعضی از تصاویر باید فقط به صورت افقی یا عمودی تکرار شوند ، در غیر این صورت عجیب به نظر می رسند:
مثال
body {
background-image: url("gradient_bg.png");
}اگر تصویر بالا فقط به صورت افقی تکرار شود (پس زمینه-تکرار: تکرار-x ؛) ، پس زمینه بهتر به نظر می رسد:
مثال
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}نکته: برای تکرار عمودی یک تصویر ، پس زمینه را تکرار کنید: تکرار-y؛
تکرار پس زمینه CSS: تکرار نمی شود
نمایش تصویر پس زمینه فقط یک بار توسط ویژگی تکرار پس زمینه نیز مشخص شده است:
مثال
فقط یک بار تصویر پس زمینه را نشان دهید:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}در مثال بالا ، تصویر پس زمینه در همان مکان متن قرار گرفته است. ما می خواهیم موقعیت تصویر را تغییر دهیم تا باعث ایجاد مزاحمت برای متن نشود.
موقعیت پس زمینه CSS
از ویژگی پس زمینه برای تعیین موقعیت تصویر پس زمینه استفاده می شود.
مثال
تصویر پس زمینه را در گوشه بالا سمت راست قرار دهید:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
