1

Всем привет:) Не могу фон сделать под размер страницы, постоянно фон как бы не помещается на страницу. Все говорят про background-size: cover; Но он у меня никогда нормально не работал. Так же пробовал задавать высоту и ширину родительскому блоку, width: 100%; width: 1920px; . Так же работает не так как нужно.

Единственное что мне нравится так это background-size: contain; Но при уменьшении страницы он уменьшает высоту.

Готов выслушать вашу критику:)

.block-advantage-price {
  background: #0b2f58 url("https://yapx.ru/v/F3BQX") no-repeat top center fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: 100% 100%;
  background-position: 50% 50%;
  color: #fff;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
<div class="block-advantage-price">
    <div class="advantage-info">
      <h3>Ищите конкретную деталь?</h3>
      <p>Если у Вас есть артикул - введите его в поле ниже и получите цену <br> ПРЯМО СЕЙЧАС!</p>
    </div>
    <form action="" method="POST" id="form-advantage-price">
      <input type="text" placeholder="Введите артикул детали" title="Введите артикул детали">
      <input type="tel" id="telephone" placeholder="Введите ваш телефон" pattern="2[0-9]{3}-[0-9]{3}"
        title="Введите ваш номер телефона" required>
      <input type="submit" value="УЗНАТЬ ЦЕНУ">
    </form>
    <div class="advantage-info">
      <p>Мы перезвоним вам в течении 3 минут и назовем цену детали!</p>
      <p>Или вы можете перезвонить нам сами:</p>
      <a href="tel:+78182474725"> +7 (XX8) 2XX-X7-X5</a>
    </div>
  </div>

Примеры (Прошу прошение за качество): Как должно выглядеть Рисунок 1 - Как должен выглядеть фон

При background-size: cover; Рисунок 2 - При background-size: cover

При background-size: contain Рисунок 3 - При background-size: containПри background-size: 100% 100%; Рисунок 4 - При background-size: 100% 100%

Как видим по ширине адекватно отображается только background-size: contain; Но по высоте работает не корректно.

3 ответа 3

2

background-size:cover ведет себя так, как должен, он не может у кого то работать,у кого-то нет. Если у вас есть блок выше, который обеспечивает этот синий фон, вероятно он больше вашего родительского элемента. Узнать это очень просто: background-color:red Если красная область будет такая же как и на вашем изображении с background-size:cover, значит ваш блок меньше размером, чем родитель.

UPD:

.block-advantage-price{
background-image:url("https://yapx.ru/v/F3BQX");
background-repeat:no-repeat;
background-position:top center;
background-size:cover;
}

Залил код сюда Отпишите, если это тот эффект, которого вы добивались

4
  • Фон я задаю конкретно для родительского блока. Изменив фон на background: red; Изменится весь фон. Так же попробовал ввести background-color:red; для родительского блока и ничего не изменилось.
    – O.Yudin
    5 дек 2019 в 20:31
  • 1
    Попробуйте задать картинку через background-image, а фон (который синий цвет ваш) перекинуть в родителя. Повторное background-size уберите, оставьте только background-size:cover.
    – Mrage
    5 дек 2019 в 20:59
  • насчет разделить картинку на 3 части , как по мне безумная идея
    – Mrage
    5 дек 2019 в 20:59
  • А при изменении размеров экрана вы фоновое изображение будете так же по куска масштабировать? А если блоки будут разного размера к примеру? Или на планшете эти блоки нужно будет выстроить в колонну? Вариант не плохой, но не думаю, что он хорош для этой реализации. Хотя тут у каждого своя правда насчёт реализаций. Так что с безумием я конечно погорячился.
    – Mrage
    7 дек 2019 в 23:36
1

Создайте Ваш фон из трех частей, предварительно разрезав картинку на эти самые нужные три части. Это единственный в Вашем случае будет вариант, который полностью решит поставленную задачу.

3
  • Может и не единственный, но самый оптимальный если сроки поджимают.
    – V.March
    5 дек 2019 в 14:43
  • Разделить фон на три части, что? Первый раз слышу о таком способе. Немного не понятно. Можете объяснить как для умственно отсталого. Заранее спасибо!
    – O.Yudin
    5 дек 2019 в 20:28
  • Я разделил картинку на три части, но вот не знаю к какому блоку его применить.
    – O.Yudin
    5 дек 2019 в 20:41
1

Ребят, все оказалось гораздо проще.. Я просто забыл что картинку невозможно растягивать до бесконечности) Из-за некоторых ошибок в отступах (margin/padding) я получил такое "чудо". А так bg-size: cover; все решил! Всем спасибо за помощь и советы!

Ваш ответ

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

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