تصویر پس زمینه در css

سری مقالات آموزش CSS – پس زمینه -css background image- تصویر پس زمینه در css

سری مقالات آموزش CSS – پس زمینه -css background image- تصویر پس زمینه در css

تصویر پس زمینه CSS

خاصیت background-image تصویری را مشخص می کند که به عنوان پس زمینه یک عنصر استفاده شود.

به طور پیش فرض ، تصویر تکرار می شود بنابراین کل عنصر را پوشش می دهد.

مثال

تصویر پس زمینه را برای یک صفحه تنظیم کنید:

تصویر پس زمینه در css
body {
  background-image: url("paper.gif");
}

مثال

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

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

توجه: هنگام استفاده از تصویر پس زمینه ، از تصویری استفاده کنید که مزاحمت متن نباشد.

تصویر پس زمینه همچنین می تواند برای عناصر خاص تنظیم شود ، مانند عنصر <p> :

مثال

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

تکرار پس زمینه CSS

تصویر پس زمینه در 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;
}

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *