here's a picture of the question https://toster.ru/q/607853

And what is the best way to make the background of the "SPECIAL TECHNIQUE" header reach the end of the site? Then I realized you can make linegradient

  • code show worker - Kjuri
  • <header> <div class = "top-line"> <div class = "container"> <div class = "row"> <div class = "col-md-4"> </ div> <div class = " col-md-4 "> </ div> <div class =" col-md-4 "> </ div> </ div> </ div> </ div> </ header> - Jacob Yavrach
  • header min-height: 1000px background-image: url (../ img / bg-header.jpg) background-repeat: no-repeat background-size: cover background-position: top left - Jacob Javrach
  • Now the background is stretched to the full width, but it is necessary that the picture does not climb onto the right indent of the container - Jacob Yavrach
  • To insert the code in the menu there is a "code fragment" item. You can edit the message and insert all you need. Well, if there is a live working site - it will be easier to drop the link. Otherwise, at the moment information is not enough. - Kjuri pm

2 answers 2

You can use a negative margin

 .with-offset { margin-right: -50px; margin-left: 50px; } 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container"> <div class="bg-info"> <h1 class="text-white">MainContent</h1> <div class="row"> <div class="col-6"> </div> <div class="col-6"> <div class="bg-danger"> <h2>Заголовок 1</h2> </div> <div class="bg-warning with-offset"> <h2>Заголовок 2</h2> </div> </div> </div> </div> </div>

  • I found a solution on the title, through linear-gradient - Jacob Yavrach February
  • But how to solve the problem with the picture of the background? - Jacob Yavrach
  • 2kovsha.prospekt.pro For the picture to reach the border of the right container, you can make the background-size: 85%, but it will take a lot of time to edit media queries - Jacob Javrach
  • 2kovsha.prospekt.pro - Jacob Yavrach

background header "SPECIALS" on the right reached the end of the site

 body, html { margin: 0; padding: 0; } header { overflow: hidden; } .header-content .h1-span { position: relative; } .header-content .h1-span::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; background: rgba(250, 190, 13, 0.7); right: -3000px; } .container { position:relative; max-width:70%; margin: 0 auto; } .container .wrap-container { position:relative; z-index:2; } .container:after { content:""; position:absolute; right:0; top: -90px; position:absolute; bottom:0; left:-1000px; background: url("http://placeimg.com/500/300/an") no-repeat 100% 0/100% 100%; } 
 <header> <div class="container"> <div class="wrap-container"> <div class="header-content"> <h1>Аренда<div class="h1-span"><span>спецтехники</span></div></h1> </div> </div> </div> </header>

for background something like this through a pseudo-element: after,

  .container { position:relative; } .container:after { content:""; position:absolute; right:0; top: -90px; position:absolute; bottom:0; left:-2000px; background: url(../img/bg-header.jpg) no-repeat 100% 0/auto 100%; }
  • I understood that, but what about the background? - Jacob Yavrach
  • How to correctly move it to the left adaptive? - Jacob Yavrach
  • background-size: contain well, or you can background-size: cover or background-size: 100% auto - depending on the desired appearance - Kjuri
  • I try on everyone, but something does not stand up for revenge here is the bootstrap grid in the layout drive.google.com/file/d/1p37NXgdKJH8gSMZCJGmqsbO8-mniY_AK/… - Jacob Javrach
  • Well, if so that the right was white, then shamanized with pseudo-elements, added to the answer above, something like that. - Kjuri