The site has a main background (a blue picture), you need to add one more picture after the title so that it hits the text as it were, but the problem is that this picture (mountains) should be the full width of the screen as the background, and it is limited by the parent, and container how to be?

<section id="header"> <div class="container"> <div class="header"> <div class="header-menu"> <img src="Img/header/logo.png" alt="Logo"> <ul> <li><a href="#">Home</a></li> <li><a href="#">What We Offer</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div class="header-main"> <h2>SKI & SNOWBOARD school</h2> <h1>Stay & Ski</h1> <img class="mountains"src="Img/header/mountains.png"alt=""> <p>The countdown to ski season has begun! So, it is hightime to improve your skills to have maximum fun this winter</p> <button>online booking</button> </div> </div> </div> </section> #header { background: url(../Img/header/background.png) center no-repeat; background-size: cover; .header { &-menu { display: flex; justify-content: space-between; padding-top: 30px; ul { list-style-type: none; li { display: inline; margin-left: 15px; a { text-decoration: none; color: @white; .muil(); font-size: 16px; } } } } &-main { width: 80%; margin: 0 auto; h2 { text-align: center; .catamaran(); color: #fefefe; text-transform: uppercase; opacity: 0.4; font-size: 30px; margin-bottom: 0; margin-top: 60px; } h1 { text-align: center; color: #fefefe; opacity: 0.4; font-size: 170px; .catamaran(); margin-top: 0; text-transform: uppercase; } } } }

    3 answers 3

    That's about what it was necessary to do

    Slightly made adaptive - open the preview on the whole page and compress the browser window

    Here I did it: https://codepen.io/topicstarter/pen/YBYKvd

     $("span.trigger").on("click", function() { $("ul").toggleClass("view"); }) 
     * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .container { max-width: 100%; margin: 0px auto; } #header { background: url(https://i.stack.imgur.com/3Y5bT.jpg) center no-repeat; background-size: cover; position: relative; } #header .header-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 30px; } #header .header-menu ul { list-style-type: none; display: flex; align-items: center; } #header .header-menu ul li { margin-right: 1vw; } #header .header-menu ul li a { text-decoration: none; color: #ffffff; font-family: 'Muli', sans-serif; } #header .header-main { margin: 0 auto; } #header .header-main h2 { text-align: center; font-family: 'Catamaran', sans-serif; color: #fefefe; text-transform: uppercase; opacity: 0.4; font-size: 4.1vw; margin-bottom: 0; margin-top: 60px; } #header .header-main h1 { text-align: center; color: #fefefe; opacity: 0.4; font-size: 11vw; font-family: 'Catamaran', sans-serif; margin-top: 0; text-transform: uppercase; } #header .header-main .mountains { display: block; width: 100%; } @media (max-width:695px) { ul li { margin-right: 10px; } ul li a { font-size: 14px; } } @media (max-width:640px) { ul { flex-direction: column; position: absolute; left: 0; top: 0; padding: 20px; background: #cc00cc; width: 100%; height: 100%; z-index: 99; transform: translateX(-200%); transition: 0.64s; } ul li { text-align: left; margin-left: 0; } .logo { object-fit: contain; } span.trigger { display: block; width: 50px; height: 50px; cursor: pointer; position: relative; z-index: 100; } span.trigger i { display: block; width: 40px; height: 8px; background: #fbfbfb; margin: 6px auto; } .view { transform: translateX(0); } } 
     <meta name="viewport" content="width=device-width, initial-scale=1"> <section id="header"> <div class="container"> <div class="header"> <div class="header-menu"> <img src="https://i.stack.imgur.com/Rab6O.png" alt="Logo" class="logo"> <span class="trigger"> <i></i> <i></i> <i></i> </span> <ul> <li><a href="#">Home</a></li> <li><a href="#">What We Offer</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div class="header-main"> <h2>SKI &amp; SNOWBOARD school</h2> <h1>Stay &amp; Ski</h1> <img class="mountains" src="https://i.stack.imgur.com/BwAcf.png" alt=""> <p>The countdown to ski season has begun! So, it is hightime to improve your skills to have maximum fun this winter</p> <button>online booking</button> </div> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

      Through position : Ask the parent position: relative , and the element position:absolute , and do anything with this element ... It all depends on what size the picture and the parent block?

      • Unloaded to the host, for clarity, sizovleonid.ru/Ski%20&%20Snowboard%20School - Leonid Sizov
      • Make the entire available width 100% (max-width) of the entire document. Also set the container and parent block to 100%. If the text is stretched to the full width, limit it, and set the img 100% width, which it will take from the parent ... Second option-- - take out the picture itself for the div block and through the already known positioning, issue it as you need to impose a background on top - Rostovpapa February
      • Thank you very much) - Leonid Sizov

      Something can be done

       #header { background: url(../Img/header/background.png) center no-repeat; background-size: cover; .header { &-menu { display: flex; justify-content: space-between; padding-top: 30px; position: relative; z-index: 3; ul { list-style-type: none; li { display: inline; margin-left: 15px; a { text-decoration: none; color: @white; .muil(); font-size: 16px; } } } } &-main { width: 80%; margin: 0 auto; position: relative; z-index: 2; h2 { text-align: center; .catamaran(); color: #fefefe; text-transform: uppercase; opacity: 0.4; font-size: 30px; margin-bottom: 0; margin-top: 60px; } h1 { text-align: center; color: #fefefe; opacity: 0.4; font-size: 170px; .catamaran(); margin-top: 0; text-transform: uppercase; } .mountains{ width: 100%; position: fixed; height: 100%; top: 0; left: 0; z-index: -1; } } } } 
       <section id="header"> <div class="container"> <div class="header"> <div class="header-menu"> <img src="Img/header/logo.png" alt="Logo"> <ul> <li><a href="#">Home</a></li> <li><a href="#">What We Offer</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div class="header-main"> <h2>SKI & SNOWBOARD school</h2> <h1>Stay & Ski</h1> <img class="mountains"src="Img/header/mountains.png"alt=""> <p>The countdown to ski season has begun! So, it is hightime to improve your skills to have maximum fun this winter</p> <button>online booking</button> </div> </div> </div> </section>

      or already a picture in a separate div