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