Как сделать адаптивный фон изображение?

Question

html, body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.container{
    max-width: 1200px;
    margin: 0px auto;
    padding: 0px 15px;
}

.header_bg{
    position: absolute;
    z-index: -1;
    width: 3840px;
    height: 700px;
}

.bg{
    max-width: 3840px;
}

.main{
    width: 100%;
    height: 600px;
    background-color: brown;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PIZZA</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="media.css" type="text/css">
</head>
<body>
    <div class="wrapper">
        <div class="header_bg">
            <img src="Media/bg_img.jpg" alt="background" class="bg">
        </div>
        <div class="container">
            <header>
                <img src="Media/logo.png" alt="logo" class="header_logo">
                <h1 class="header_main_txt">Лучшая Пицца на</br>Вашем столе</h1>
                <h3 class="header_dop_txt">Доставка Бесплтано</h3>
                <nav class="header_menu">
                    <ul>
                        <li><a href="">Главная</a></li>
                        <li><a href="">О нас</a></li>
                        <li><a href="">Галерея</a></li>
                        <li><a href="">Контакты</a></li>
                    </ul>
                </nav>
            </header>
            <div class="main">
                <h2 class="main_txt_zag">Контакты</h2>
                <div class="main_content">
                    <div class="column">
                        <img src="Media/placeholder.png" alt="placeholder" class="main_icon">
                        <p class="main_txt">Адрес:</br>г. Днепр, ул. Столярова 4</br>оф. 12</p>
                    </div>
                    <div class="column">
                        <img src="Media/telephone.png" alt="telephone" class="main_icon">
                        <p class="main_txt">Адрес:</br>г. Днепр, ул. Столярова 4</br>оф. 12</p>
                    </div>
                    <div class="column">
                        <img src="Media/mail.png" alt="mail" class="main_icon">
                        <p class="main_txt">Адрес:</br>г. Днепр, ул. Столярова 4</br>оф. 12</p>
                    </div>
                    <div class="column">
                        <img src="Media/wall-clock.png" alt="clock" class="main_icon">
                        <p class="main_txt">Адрес:</br>г. Днепр, ул. Столярова 4</br>оф. 12</p>
                    </div>
                </div>
            </div>
            <footer>
                <p class="footer_txt">&copy; 2022</p>
                <p class="footer_txt">Lorem Ipsum</p>
            </footer>
        </div>
    </div>
</body>
</html>

Как сделать фон изображение как на примере?

БЛОГ НА HUSL

Как сделать адаптивный фон изображение?

Ответы (0 шт):