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

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

زمان مطالعه

3 دقیقه

تعداد بازدید

919

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :

نکات html

اشتراک گذاری این مطلب
بهزاد میرزازاده
در مورد نویسنده : همیشه سخت تلاش کردم و به موفقیت های خیلی زیادی رسیدم اما دلیل نشد که متوقف بشم من برای هر روز برنامه دارم و به امید موفقیت های بزرگتر قدم بر میدارم همیشه سخت ترین مسئله ها، ساده ترین راه حل رو دارند پس بهانه جویی نباید روش کار ما برنامه نویسان باشه!!! ما می توانیم آینده را تعیین کنیم

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

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

زمان مطالعه

3 دقیقه

تعداد بازدید

919

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :

نکات html

اشتراک گذاری این مطلب

بعنوان یک برنامه نویس فرانت می توانید تقریبا برای هر تگی در 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>

 

بهزاد میرزازاده
در مورد نویسنده : همیشه سخت تلاش کردم و به موفقیت های خیلی زیادی رسیدم اما دلیل نشد که متوقف بشم من برای هر روز برنامه دارم و به امید موفقیت های بزرگتر قدم بر میدارم همیشه سخت ترین مسئله ها، ساده ترین راه حل رو دارند پس بهانه جویی نباید روش کار ما برنامه نویسان باشه!!! ما می توانیم آینده را تعیین کنیم


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی