Фон картинкой в CSS

188

12 декабря 2021, 07:00

Всем привет:) Не могу фон сделать под размер страницы, постоянно фон как бы не помещается на страницу. Все говорят про 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 - Как должен выглядеть фон

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

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

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

Answer 1

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;
}

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

Answer 2

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

Answer 3

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