Мне нужно задать общее фоновое изображение для header и секции hero
Вот мой код:
<!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, но при таком случае я не мог нормально верстать следующие секции.