1

Скажите почему картинка сползает? У меня все было 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;  

}

3
  • 1
    код было бы неплохо посмотреть 20 фев 2017 в 13:54
  • если картинка - бекграунд, значит этот блок у вас вне контейнера 1170px. И послушайте @Назара Калитюка, покажите код, шаманы с бубнами все ушли на север)
    – Kirill
    20 фев 2017 в 14:15
  • .block2 { margin: 0 auto; max-width: 100%; height: 680px; background: url(../img/background2.png) no-repeat; }
    – A.G
    20 фев 2017 в 15:15

2 ответа 2

1

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

background-size:cover

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

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

0

Вариант 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;
}
<div class="box">
   
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.