background-image Property
ویژگی background-image در CSS یک یا چند تصویر را در پس زمینه عنصر قرار می دهد.
تصاویر پس زمینه به ترتیب بر روی یکدیگر قرار می گیرند. اولین تصویر به عنوان نزدیکترین تصویر به کاربر در بالای تصاویر دیگر قرار می گیرد. کادر (borders) عنصر بالای تصویر پس زمینه و رنگ پس زمینه (background-color) در زیر آن قرار پیدا می کند. نمایش تصویر در ارتباط با محتوا و کادر، توسط ویژگی های background-clip و background-origin تعریف می شود.
اگر تصویر به هر علت بارگذاری نشود، مرورگر مقدار این ویژگی را برابر با none قرار خواهد داد.
نحوه نوشتار
/* قرار دادن یک تصویر */
background-image: url("img/flower.jpg");
/* قرار دادن دو یا چند تصویر */
background-image: url("img/flower.jpg"),
url("img/tree.jpg");
/* قرار دادن یک تصویر و رنگ پس زمینه */
background-image:
linear-gradient(to left, rgb(107, 142, 35), rgba(107, 142, 35,0.3)),
url('https://my-project.ir/img/tree.jpg');
مقادیر
none
کلیدواژه ایست مه برای نشان ندادن تصویر بکار می رود.
آدرس URL
آدرس url تصاویر را مشخص می کند. برای مشخص کردن بیش یک تصویر آدرس ها با ویرگول (,) از عم جدا می شوند.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم. در این مثال در سه حالت نحوه تصاویر پس زمینه نشان داده شده است. اولی بصورت تصویر تکی، دومی دو تصویر و سومی تصویر پس زمینه و رنگ پس زمینه:
html
<div class="wrapper">
<p>یک تصویر</p>
<div class="box1"></div>
</div>
<div class="wrapper">
<p>دو تصویر</p>
<div class="box2"></div>
</div>
<div class="wrapper">
<p>یک تصویر و شیب رنگ پس زمینه</p>
<div class="box3"></div>
</div>
css
div {
width: 300px;
height: 295px;
margin-bottom: 50px;
}
.box1 {
background-image: url(http://my-project.ir/img/cardboard.jpg);
}
.box2 {
background-image: url(http://my-project.ir/img/cup.png),
url(http://my-project.ir/img/cardboard.jpg);
}
.box3 {
background-image: url(http://my-project.ir/img/cup.png),
linear-gradient(rgba(100, 42, 24, 0.85), rgba(241, 187, 71, 0.849));
}
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.
