background-image

با استفاده از ویژگی background-image می توان یک تصویر یا چند تصویر روی هم به عنوان پس زمینه عنصر قرار داد.

آدرس تصویر را باید درون تابع url قرار دهیم:

 


header {
  background-image: url('assets.css-tricks.ir/images/scene.jpg');
}

 

حال اگر بخواهیم چند تصویر برای یک عنصر تعریف کنیم باید آنها را توسط ویرگول از هم جدا کنیم:

 


header {
  background-image: url('first-image.jpg'), url('second-image.jpg');
}

 

می توان تصویر یا تصاویر را توسط ویژگی های دیگر مربوط به پس زمینه اندازه داد (background-size), مکان آنها را تنظیم کرد (background-position) و همینطور تنظیماتی دیگر که می توان توسط ویژگی های دیگر مربوط به پس زمینه انجام داد.

زمانی که چند پس زمینه برای عنصر تعریف می کنیم اولین پس زمینه تعیین شده بر روی پس زمینه های دیگر قرار می گیرد و اگر اندازه آن سرتاسر عنصر را بگیرد و بصورت نیمه شفاف (شیشه ای) نباشد، پس زمینه های دیگر قابل مشاهده توسط کاربر نخواهند بود.

اگر عنصری background-color داشته باشد و برای آن background-image هم تعریف کنیم و همینطور این عنصر دارای border نیز باشد, ترتیب قرار گرفتن این ویژگی ها به این صورت است که رنگ پس زمینه در پایین ترین لایه, بعد از آن تصویر پس زمینه و روی همه این ها حاشیه یا همان border قرار خواهد گرفت.

اینکه تصویر در کدام ناحیه عنصر ترسیم می شود را می توان توسط ویژگی های background-clip و background-origin تعیین کرد.

یک تصویر را می توان در پس زمینه بصورت کاشی کاری تکرار کرد و این کار از طریق ویژگی background-repeat انجام می شود.

توسط مقدار none برای ویژگی background-image می توان پس زمینه یک عنصر را خالی از تصویر کرد:

 


header {
  background-image: none; /* حذف تصاویر پس زمینه */
}

 

نکته مهم اینکه اگر تصویری از نظر محتوایی اهمیت دارد نباید در پس زمینه قرار بگیرد بلکه به عنوان یک عنصر <img> باید ارائه شود تا توسط موتورهای جستجو و ربات ها قابل شناسایی و تشخیص باشد.

در دموی زیر در مثال اول دو پس زمینه وجود دارند که اولین آنها تصویر زنبور می باشد و بعد از آن تصویر آسمان و گل. همچنین در مثال دوم یک الگو وجود دارد که به صورت تکراری در پس زمینه چیده شده است:

 

See the Pen background-image by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

پشتیبانی مرورگر ها

اگر تنها یک تصویر برای پس زمینه قرار دهیم تمام مرورگرها پشتیبانی می کنند.

 
زمانی که از چند تصویر استفاده کنیم پشتیبانی مرورگرها بصورت زیر خواهد بود:
 

 

همینطور اگر تصویر از نوع SVG باشد پشتیبانی مرورگرهای مختلف به این صورت می باشند:
 

 

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