Размер фонового изображения не отображается на firefox

Фоновое изображение не отображается правильно в firefox, но отлично работает в других браузерах. Пожалуйста, см the link here Размер фонового изображения не отображается на firefox

body { 
 
    background-image: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg'); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
}

источник

2016-06-06 george saad

Пожалуйста, укажите соответствующий код * здесь *, а не весь сайт. – nicael

Пожалуйста, добавьте содержательный код и описание проблемы здесь. Не просто ссылку на сайт , который нуждается в исправлении - в противном случае этот вопрос потеряет значение для будущих посетителей после проблема решена или если сайт, на который вы ссылаетесь, недоступен. Проводка [Минимальный, полный и проверенный пример (MCVE)] (http://stackoverflow.com/help/mcve), который показывает, что ваша проблема поможет вам получить более качественные ответы. Для получения дополнительной информации см. [Что-то на моем веб-сайте не работает. Могу ли я просто вставить ссылку на него?] (Http://meta.stackexchange.com/questions/125997/) Спасибо! – j08691

background-size работает должным образом,

но Вы содержания в position:absolute; так что это дает не height к телу, так что нет background посмотреть на самом деле.

Если каждый другой браузер использует html для рисования фона, а также для перемещения фона, firefox сохраняет размер фона, прикрепленный к фактическому размеру тела, это, по-моему, похоже на ошибку.

https://www.w3.org/TR/CSS2/colors.html (о фонов и цветов ...)

Вы можете добавить:

html { 
    height:100%; 
} 
body { 
    min-height:100%; 
}

или использовать HTML вместо для фона.

источник

2016-06-06 14:56:31

Это очень понравилось! –

Это свойство работает:

background-size: 100%;

источник

2016-06-06 14:49:50 ciurciurek

Теперь страница не будет реагировать –

Итак, так: 'background-size: cover;' – ciurciurek

Вместо background-size: 100% 100%; вы должны использовать cover. Это гарантирует, что изображение будет покрывать всю страницу независимо от размера (соответствует высоте или ширине, в зависимости от того, что больше). Как так:

body { 
    background-image: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
}

Когда-либо лучший способ, чтобы написать то же самое будет:

body { 
    background: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg') center center/cover no-repeat; 
}

Edit: Реальный ответ является сочетание @GCyrillus ответа, и это одна. Добавьте height: 100% или height: 100vh к телу, чтобы иметь изображение полной высоты. Затем обновите background-size: cover, чтобы растянуть изображение правильно, сохраняя коэффициент.

источник

2016-06-06 14:50:49

Это сработало для некоторых моих ошибок firefox '' background-size'', однако я нашел использование '' background-size: содержать ; '' работал лучше для моей конкретной проблемы, но ваш ответ указал мне в правильном направлении. Благодаря! –

Размер фонового изображения не отображается на firefox

ответ

Смежные вопросы