одинаковый CSS, разные результаты браузера?

У меня есть этот тег, который отлично отображается в Chrome, но, как вы можете видеть, скриншоты выглядят неправильно в Firefox.одинаковый CSS, разные результаты браузера?

 html { 
background-image:url("BackgroundePictureTitleHD.png"); 
background-size: 100% 100%; 
background-repeat:no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
}

Размеры фона составляют 1366x769. Я использую размер фона: так что я вижу фон NO MATTER размер окна браузера.

Это правильный способ сделать это правильно?

Here what the above code looks like in Chrome:

Here what the above code looks like in Firefox:

Почему это происходит?

источник

2014-01-07 Benjamin Jones

Я заметил, что если я изменил: background-size: 100% 100%; к размеру фона: обложка; это работает. –

body и html по умолчанию не имеют самой высоты, высота определяется содержимым, которое у них есть.

И потому, чтобы указать фону, чтобы он имел высоту 100% своего контейнера, и вы, вероятно, просто имеете <p> внутри, это не заполняет все окно.

вы можете дать им высоту, используя это правило:

body, html { 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
}

И всегда добавить свойство CSS без префикса поставщика в конце вашего правила к. Должно быть (но это то, что мне нужно проверить, когда я вернусь домой), игнорируется браузерами, которые его не поддерживают, поэтому 100% 100% - это резерв. Если это не сработает, переместите background-size: cover из этого правила и создайте отдельный, расположенный ниже него, только содержащий background-size: cover.

html { 
    background-image:url("BackgroundePictureTitleHD.png"); 
    background-size: 100% 100%; 
    background-repeat:no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

источник

2014-01-07 19:15:02

, но это растянет изображение ... – ProGM

@ProGM да, я не видел, что «размер фона: обложка» без префикса поставщика отсутствовал. Добавил его к ответу. –

;) да, но теперь есть два 'фона-размера' – ProGM

Вы можете использовать Бэкстретч: http://srobbin.com/jquery-plugins/backstretch/

Он должен сделать это легко и заботиться о многих вопросах, таких как загрузка изображения после загрузки страницы.

источник

2014-01-07 19:27:34 aharris88

одинаковый CSS, разные результаты браузера?

ответ

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