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 that you have read and understand our privacy policy and code of conduct.

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