Свойство background-size
Задает размер фонового изображения элемента
background-size: auto;
Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
background-size: auto;
Размер фонового изображения равен оригинальным размерам изображения
<style>
.example-1 {
height: 200px;
background-color: #aee5ff;
background-image: url(https://placem.at/places?w=200&h=150&txt=0&random=2);
background-repeat: no-repeat;
background-size: auto;
}
</style>
<div class="example-1"></div>
background-size: 300px 200px;
Размер фонового изображения 300x200, где первый параметр - ширина изображения, второй параметр - высота изображения
<style>
.example-2 {
height: 200px;
background-color: #aee5ff;
background-image: url(https://placem.at/places?w=200&h=150&txt=0&random=2);
background-repeat: no-repeat;
background-size: 300px 200px;
}
</style>
<div class="example-2"></div>
background-size: 100% 50%;
Размер фонового изображения в процентах относительно размера контейнера, где первый параметр - ширина изображения, второй параметр - высота изображения
<style>
.example-3 {
height: 200px;
background-color: #aee5ff;
background-image: url(https://placem.at/places?w=200&h=150&txt=0&random=2);
background-repeat: no-repeat;
background-size: 100% 50%;
}
</style>
<div class="example-3"></div>
background-size: contain;
Фоновое изображение будет видно полностью
<style>
.example-4 {
height: 200px;
background-color: #aee5ff;
background-image: url(https://placem.at/places?w=200&h=150&txt=0&random=2);
background-repeat: no-repeat;
background-size: contain;
}
</style>
<div class="example-4"></div>
background-size: cover;
Фоновое изображения будет растянуто на всю ширину и высоту контейнера с соблюдением пропорций
<style>
.example-5 {
height: 200px;
background-color: #aee5ff;
background-image: url(https://placem.at/places?w=200&h=150&txt=0&random=2);
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div class="example-5"></div>