0

Мне нужно задать общее фоновое изображение для header и секции hero

Вот скрин из макета: enter image description here

Вот мой код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fast Food</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <header class="header">
        <div class="header__container container">
            <div class="header__logo">
                <img src="./img/header/header__logo.png" alt="Logo">
            </div>
            <nav class="nav">
                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="#" class="nav__link active">HOME</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">PAGES</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">OUR OFFER</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">PRICING</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">SHOP</a>
                    </li>
                </ul>
            </nav>
            <a href="#" class="btn__big">
                ORDER NOW
            </a>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="hero__container container">
                <h1 class="hero__title">
                    FAST FOOD BURGERS
                </h1>
                <h2 class="hero__subtitle">
                    The fastest food, for instant hunger.
                </h2>
                <p class="hero__descr">
                    Some food has looked so awful that it's looked like something that the dog's brought home, yet after one mouthful I've been left eating my thoughts, my words & my food and gone back for seconds.
                </p>
                <a href="#" class="btn__big">ORDER NOW</a>
            </div>
        </section>

        <section class="foodlist">

        </section>
    </main>
</body>
</html>

CSS:

@import 'reset.css';
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

body{
    font-family: 'Roboto', sans-serif;
    background-color: #1C1C1C;
}
.container{
    max-width: 1190px;
    margin: 0 auto;
    padding: 0 15px;
}
.nav__link.active{
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.btn__big{
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background-color: #F6762C;
    border-radius: 5px;
    padding: 15px 37px;
    display: inline-block;
}

/* Header */
.header{
    padding: 25px 0;
    margin-bottom: 186px;
}
.header__container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header__logo{

}
.logo{

}
.nav{

}
.nav__list{
    display: flex;
    align-items: center;
    column-gap: 28px;
}
.nav__item{

}
.nav__link{
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

/* Hero */
.hero{
    color: #fff;
}
.hero__container{

}
.hero__title{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 7px;
    letter-spacing: 0.1em;
}
.hero__subtitle{
    font-size: 57px;
    font-weight: 500;
    max-width: 555px;
    margin-bottom: 37px;
}
.hero__descr{
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    max-width: 523px;
    margin-bottom: 42px;
}

/* Food List */
.foodlist{
    padding-top: 115px;
    padding-bottom: 102px;
    /* background: #090; */
}


Я пробовал задать фоновое изображение на body, но при таком случае я не мог нормально верстать следующие секции.

3 ответа 3

0

Не корректно задан вопрос, но если тебе нужно просто задать background для этих двух секций, то просто укажи для этих двух секций параметр background

.hero, header { background-image: url('ссылка');} 

Или же что то инное

0

у вас секция hero нужно что бы была высотой 100vh , а header сделайте position: fixed или absolute , тогда изображение будет на всю высоту экрана, а шапка по верх. Оберните контент в div и отцентрируйте его flex'ом

0

Если тебе нужен просто фон с этим бургером, для этих двух блоков То просто добавь их в родительский блок

<div style="background-image: url('*ссылка*');">
     <header>Контент</header>
     <div class="hero">Контент</div>
</div>
<div class="wrapper-content">Контент без фона</div>

А дальше уже не будет этого фона, там уже высоту можете корректировать как угодно, через padding, height, не важно

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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