0

Есть блок, с фоном.

.slide {
    background-image: url("../img/slide.jpg");
    height: 476px;
    background-position: 50%50%;
    background-repeat: no-repeat;
}

А можно тут указать размер этого изображение? Хочу под каждое расширение экрана что бы сжималось, а то придеться делать много картинок под каждоме расширение.

1
  • background-size:cover;
    – G.Denis
    16 сен 2016 в 6:36

1 ответ 1

2

Добавьте:

.slide {
  -webkit-background-size: cover;
          background-size: cover;
}

или

.slide {
  -webkit-background-size: contain;
          background-size: contain;
}

Пример с cover:

.slide {
    background-image: url("http://www.randrs.ru/photo/1-0/903_bumblebee-.jpg");
      height: 476px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}
<div class="slide"></div>

Пример с contain:

.slide {
    background-image: url("http://www.randrs.ru/photo/1-0/903_bumblebee-.jpg");
      height: 476px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  -webkit-background-size: contain;
     background-size: contain;
}
<div class="slide"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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