Tell me why the picture slips? I had everything in 1170, the container is the same. And this block should be set to the full width, I put 100% - and it starts to crawl, and the text remains in place

enter image description here

.block2 { margin: 0 auto; max-width: 100%; height: 680px; background: url(../img/background2.png) no-repeat; } 

 .block2 { margin: 0 auto; max-width: 100%; height: 680px; background: url(../img/background2.png) no-repeat;

}

  • one
    code would be nice to see - Nazar Kalytiuk
  • if the picture is a background, then this block is outside your 1170px container. And listen @Nazar Kalityuk, show the code, the shamans with tambourines all went north) - Kirill Korushkin
  • .block2 {margin: 0 auto; max-width: 100%; height: 680px; background: url (../ img / background2.png) no-repeat; } - AG

2 answers 2

Write in the CSS block, in which the background image:

 background-size:cover

Thus, the picture will stretch the entire width.

Read more about background-size

    Option 1 - align the block itself and set the adaptability of the picture inside:

     .box { width: 100%; margin: 0 auto; text-align: center; } .box img { max-width: 100%; width: 100%; height: auto;; } 
     <div class="box"> <img src="http://www.w3schools.com/howto/img_mountains.jpg" alt=""> </div>

    Option 2 - picture-background:

     .box { width: 100%; min-height: 300px; margin: 0 auto; background: url(http://www.w3schools.com/howto/img_mountains.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; } 
     <div class="box"> </div>