Свойство 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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии