У меня есть изображение, которое я хочу отобразить в качестве фонового изображения нижнего колонтитула. Он должен отображаться на 100% ширине всех размеров экрана, но в настоящее время он отображается правильно на маленьких экранах, тогда как на больших экранах он отображается только в центре экрана, причем обе стороны остаются свободными, что мне не нужно.

Вот Css, который я использовал для установки фонового изображения нижнего колонтитула Div:

.footer-shadow {
    position:relative;
    height: 237px;
    margin-top:0px;
    width: 100%;
    background: url('../img/new_images/footer-bg.png') center center no-repeat;
    background-size: contain;
    color: gray;
}

Пожалуйста, помогите мне сделать нижний колонтитул отзывчивым, чтобы изображение соответствовало всем размерам экрана.

Благодарность

0
user3924730 11 Авг 2014 в 08:46

3 ответа

Лучший ответ

Если вы хотите, чтобы изображение всегда было на 100% шириной, используйте следующий CSS

.footer-shadow {
    background-size: 100%;
}

Это автоматически делает ширину фонового изображения 100% и соответствующим образом масштабирует высоту. В настоящее время вы используете background-size: contain;, который масштабирует изображение до «максимального размера, чтобы и его ширина, и его высота могли уместиться внутри области содержимого».

3
Feek 11 Авг 2014 в 05:03

Используйте свойство background-size:cover;, которое растягивает ваше изображение до размера (включая обрезанную область), но может некорректно отображаться во многих браузерах, для которых вам нужно добавить дополнительные параметры webkit для firefox и IE, например:

-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
0
Geniusknight 11 Авг 2014 в 05:26

Заменить

background-size: contain;

От

background-size: cover;
0
nunoarruda 11 Авг 2014 в 04:48