0

Как сделать чтобы высота бэкграунда растягивалась при увеличении высоты окна браузера? Паддингами не вариант, так как сайт с горизонтальной прокруткой, ниже есть скриншот как всё это выглядит в полноэкранном режиме, нужно чтобы бэкграунд растягивался при нажатие f11 например. Перепробывал уже все свойства у бэкграунда.

<article class="slider_item">
    <div class="header">
        <div class="wraper">
            <div class="logo">
                <img src="img/logo.png" alt="logo">
                <h1>SM-Marketing</h1>
            </div>
            <div class="first-page">
                <div class="method">
                    <h2>Методика №1</h2>
                    <p class="title-p">по скоростному получению клиентов из интернета</p>
                    <p class="method-p">или <br> как с полного нуля, <br> всего через пару дней <br> начать получать первые заявки</p>
                </div>
                <div class="block-jq">
                    <div class="block-jq-item animated bounceInDown delay-0.5s"><div>как найти новых клиентов</div></div>
                    <div class="block-jq-item animated bounceInRight delay-1s"><div>как получать больше заявок</div></div>
                    <div class="block-jq-item animated bounceInUp delay-2.5s"><div>как построить систему лидогенерации</div></div>
                </div>
            </div>
        </div>
    </div>
</article>

Ниже css

.slider__item 
    width: 100%
    height: 100%

.header
    background: url(../img/header_bg.png)
    background-repeat: no-repeat
    padding: 70px
    padding-bottom: 170px
    background-position: center
    background-size: 100% 100%

.wraper
    max-width: 1200px
    margin: 0 auto   

.logo
    display: flex

Header

2 ответа 2

1
.slider__item
    min-height: 100vh

ну и ковер, что в посте выше

1
  • немного по другому вышло, min-heigt в header добавить было и убрать все падинги с header и переместить на другие элементы. 7 июл 2019 в 8:46
0

Для растягивание используйте background-size: cover также можете задать min-height к шапке.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Полная статья https://css-tricks.com/perfect-full-page-background-image/

А также советую прочитать: https://www.w3schools.com/css/css_rwd_mediaqueries.asp Чтобы для каждого размера экрана выдать свои классы.

1
  • Для каждого блока у меня будет отдельный бэкграунд, так что задавать через html не мой вариант. min-height добавит колесо прокрутки которое мне не нужно, так как скролл производится горизонтально. 6 июл 2019 в 19:56

Ваш ответ

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

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