3

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

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

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

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

2
  • 3
    Там, наверное, вначале сообщения должно быть background-size: cover; 2 дек 2017 в 0:54
  • Проверьте reset css. Возможно проблема в обнулении отступов и рамки
    – Свят
    14 апр 2021 в 11:12

5 ответов 5

4
background-size: 100% 100%;

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

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

0
2

Без воспроизводимого примера в вопросе сложно предположить в чем именно проблема. Вам подойдет именно 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>

0

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

background-size: contain;
5
  • Оно не подойдёт, т.к это свойство просто вклинит картинку в блок, тогда пробелы будут 100% 31 окт 2016 в 9:23
  • А вот и нет jsfiddle.net/85ewq9nL/1 , пробелов как-раз не будет)
    – Mikl
    31 окт 2016 в 9:39
  • действительно она растянута как нужно, но вот я делаю свое изображение с эффектом parallax, примерно как тут goldneedle.by , там главное изображение (tittle) тоже имеет cover и тому подобное, но вот, если вы уменьшите окно(в высоту тоже) вы увидете как картинка становится не на всю ширину контейнера, может быть вы знаете, с чем это связано? 31 окт 2016 в 12:06
  • Я понял причину, если картинка cover с attachment fixed, то она не будет растягиваться на весь блок, а только на весь экран..., это очень плохо, и мне нужно это как-то исправить 31 окт 2016 в 19:32
  • @simplygood Дак вы определитесь - вам нужно чтобы изображение было на весь блок или паралакс? Суть паралакса в том, что фоновое изображение слегка перемещается когда двигаешь мышкой. А чтобы оно перемещалось и не появлялось белых полос - изображение должно быть несколько больше самого блока. Поэтому для паралакса нужно background-size вычислять так чтобы высота (или ширина, что меньше) были 110% (вторая ось - высчитывать сколько по соотношению в %), background-position: 50% 50%, а уже при движении мышкой вычислять смещение и "играться" с background-position 13 июн 2018 в 7:41
0

Попробуйте

background-size: cover;

1
  • Написано же что не подходит.
    – Zicrael
    10 мая 2018 в 4:39
0

.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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