Good evening, gentlemen, there is such a part of the layout, how to impose more correctly. Content that is centered in a wrapper that has a max width of 1200. But this background image should reach to the edges of the browser (example of a screenshot is the entire width of 1920). These pictures and lines are one .png file

enter image description here

  • <div class="wrapper"><div class="container">...</div><img src="" alt=""></div> - guitarhero
  • I hope the "lines" - it's not about the grid, because it obviously can not be in one png (if the designer is in your mind) - MedvedevDev
  • her, this is the net for Bootstrap - Daniel qwaqwaqwa 6:39 pm

1 answer 1

Method 1. Make a multiple background.

 body { margin: 0; padding: 0; width: 100%; min-height: 100vh; background-repeat: no-repeat; background-image: url(http://lorempixel.com/400/100), url(http://lorempixel.com/500/200), url(http://lorempixel.com/300/300); background-position: 100% 0, 0 100px, 100% 300px; } .container { width: 100%; max-width: 500px; /* 1200px */ min-width: 320px; margin: 0 auto; min-height: 100vh; background-color: rgba(255, 255, 255, .9); box-shadow: 0 0 10px rgba(0, 0, 0, .5); } 
 <div class="container"> </div>

Method 2. Calculate the position of the image.

 body { margin: 0; padding: 0; width: 100%; min-height: 100vh; } .container { width: 100%; max-width: 500px; /* 1200px */ min-width: 320px; margin: 0 auto; min-height: 100vh; background-color: rgba(255, 255, 255, .9); box-shadow: 0 0 10px rgba(0, 0, 0, .5); position: relative; } .container img { position: absolute; width: 50vw; left: 50%; z-index: -100; } 
 <div class="container"> <img src="http://lorempixel.com/300/300"> </div>