Адаптивная высота для фонового изображения CSS

У меня есть отзывчивое фоновое изображение со следующими свойствами

    background: url( '@{sitePath}/main_banner.png') center no-repeat;
    max-width: 100%;
    z-index: -10;
    height: 475px;
    background-size: contain;

Изображение должно иметь возможность уменьшаться (как это происходит сейчас), но без большой высоты (475 пикселей) для небольших устройств. 100% минимальная и стандартная высота не работают, и я хочу избежать указания индивидуальной высоты для разных медиа-запросов, если смогу.

Кто-нибудь знает, как я могу сделать это эффективно отзывчивым?

Спасибо


css background-image media-queries
person user2151140    schedule 10.09.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы указали статическую высоту: 475px; Если вы хотите иметь меньшую высоту на меньшем устройстве, попробуйте использовать медиа-запросы:

@media (max-width: size-that-you-want){
    .class-name{
        width: some-number;
    }
}

Это должно работать.

person Superiom    schedule 10.09.2014
comment
Я не уверен в ответе, но я не думаю, что вы правильно прочитали вопрос, потому что это определенно неправильно - person Eth; 10.09.2014