Сползает background

444

21 февраля 2017, 16:20

Скажите почему картинка сползает? У меня все было 1170, контейнер так же. А этот блок надо выставить на всю ширину, ставлю 100% — и она начинает сползать, а текст остается на месте

.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;

}

Answer 1

Напишите в CSS блока, в котором фоновая картинка:

background-size:cover

Таким образом картинка будет растягиваться на всю ширину.

Подробнее о background-size

Answer 2

Вариант 1 - выровнять сам блок и задать адаптивность картинке внутри:

.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>

Вариант 2 - картинка-фон:

.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; 
}