В документации сказано, что background-size:coverрастягивает изображение так, чтобы оно по высоте и(или) по ширине было растянуто по всему блоку, но картинка растягивается только по ширине (в качестве фона использую картинку 1200×700).

Если сделать экран очень маленьким в ширину, то виден пробел между фоном и концом блока.

Можно ли как-нибудь сделать так, чтобы фон пропорционально растягивался и по ширине и по высоте.

Я предполагаю, что изображение должно увеличиваться, если ему не хватает расстояния до одной из сторон.

задан 30 окт ’16 в 21:47

Без воспроизводимого примера в вопросе сложно предположить в чем именно проблема. Вам подойдет именно background-size: cover;, он возможно не срабатывает по нескольким причинам. Например, само изображение фона содержит белые полосы, откройте изображение и посмотрите есть ли они там. Например, возможно, изображение не отцентрировано. Например, возможно другие стили перекрывают ваши, посмотрите в инспекторе. Или возможно сам блок, на который вы добавляете фон не на всю высоту или ширину нужного блока. Вот небольшой наглядный пример с фонами, возможно вам поможет:

span {
display: inline-block;
padding: 6px;
color: #2d5857;
font-family: sans-serif;
font-weight: 600;
font-size: 20px;
background: white;
margin: 6px;
}

Читайте также:  Растяжение ноги чем мазать

div {
color: white;
height: 100vh;
background-image: url(https://i.stack.imgur.com/WXyZl.jpg);
border: 6px solid yellow;
margin-bottom: 6px;
}

.bg_1 {
background-position: center;
}

.bg_2 {
background-size: cover;
}

.bg_3 {
background-size: contain;
}

.bg_4 {
background-size: cover;
background-position: center;
}

.bg_5 {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

.bg_6 {
background-position: bottom 10px right 40px;
background-size: 60px 120px;
background-repeat: no-repeat;
}
<div>
<span>no styles</span>
</div>
<div class=»bg_1″>
<span>
background-position: center;
</span>
</div>
<div class=»bg_2″>
<span>
background-size: cover;
</span>
</div>
<div class=»bg_3″>
<span>
background-size: contain;
</span>
</div>
<div class=»bg_4″>
<span>
background-size: cover;
<br>background-position: center;
</span>
</div>
<div class=»bg_5″>
<span>
background-size: contain;
<br>background-repeat: no-repeat;
<br>background-position: center;
</span>
</div>
<div class=»bg_6″>
<span>
background-position: bottom 10px right 40px;
<br>background-size: 60px 120px;
<br>background-repeat: no-repeat;
</span>
</div>

ответ дан 18 сен ’18 в 8:13

background-size: 100% 100%;

Очевидно же, первое число по ширине, второе по высоте: https://developer.mozilla.org/ru/docs/Web/CSS/background-size

Если же мы напишем вот так background-size: 100%; то это интерпритируется как background-size: 100% auto; то есть высота будет выравниваться пропорционально, а нам это не нужно, по этому нужно явно указать что высота должна быть не авто а 100% от высоты блока. Изи катка

ответ дан 11 авг ’19 в 10:58

Используйте contain для свойства background-size:

background-size: contain;

ответ дан 31 окт ’16 в 6:38

Попробуйте

background-size: cover;

ответ дан 27 мар ’18 в 19:23

.block {
margin: 5px;
width: 500px;
height: 200px;
border: 2px solid gray;
background: url(https://i.stack.imgur.com/qQoD4.jpg) no-repeat;
}

.block_one {
background-size: auto;
}

.block_two {
background-size: cover;
}

.block_three {
background-size: contain;
}
.block_for {
background-size: 100% 100%;
}
background-size: auto;
<div class=»block block_one»></div>
background-size: cover;
<div class=»block block_two»></div>
background-size: contain;
<div class=»block block_three»></div>
background-size: 100% 100%;
<div class=»block block_for»></div>

ответ дан 13 янв в 21:21

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.