آموزش تصاویر پس زمینه (background) در html

تصویر پس زمینه برای یک تگ

برای اینکار کافیست background-image تگ مورد نظر رو برابر با آدرس تصویرتون قرار بدید مثل مثال ذیل که به صورت inline css اینکارو انجام دادیم

<div style="background-image: url('img/logo.png');">

روش بعدی اینه که تو قسمت head تصویر مورد نظر رو به تگ یا کلاس مورد نظر اعمال کنید

<style>
div {
  background-image: url('img/logo.png');
}
</style>

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

اگه میخاید این کارو انجام بدید کافیه برای تگ body تصویر پس زمینه اعمال کنید

فراموش نکنید تصاویرتون باید حجم کمی داشته باشند تا در رتبه های سئو سایت دچار مشکل نشید

<style>
body {
  background-image: url('img/logo.png');
}
</style>

تکرار تصویر پس زمینه

اگه تصویر انتخابی کوچکتر از تگ باشه تصویر به صورت افقی و عمودی تکرار میشه تا کل فضای تگ مورد نظر رو پر کنه

برای جلوگیری از تکرار شدن تصویر میتونید خصوصیت background-repeat برابر با no-repeat قرار بدید

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

کاور پس زمینه

اگه نیاز هست که تصویرتون کل عنصر رو بدون تکرار پر کنه میتونید خصوصیت background-size رو برابر با cover قرار بدید همچنین برای اطمینان از اینکه تصویر کامل پس زمینه رو پر کرده میتونید خاصیت background-attachment رو هم برابر با fixed کنید. این fixed کمک میکنه تصویر کوچیک خیلی کشیده نشه و تا اونجایی که میتونه منطبق بشه.

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

متناسب کردن تصویر پس زمینه (Stretch)

اگه نیازه تصویر 100 درصد با تگ منطبق بشه میتونید خاصیت background-size رو برابر 100% 100% قرار بدید تو این روش برعکس روش قبل اگر صفحه بزرگ و کوچیک بشه تصویر منطبق با همون بزرگ و کوچیک میشه.

body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>