Задать вопрос
@SemenyukS
css

Как сверстать фон страницы для всех браузеров?

Привет всем. Скажите пожалуйста, как сверстать страницу таким образом, чтобы размеры её фона были одинаковы во всех браузерах ? Вот код :
header {
    background: url(../img/bg_header_1.jpg) no-repeat;
    height: 1040px;
    background-position-y: -100px;
    min-width: 100%;
    background-size: cover;
}


Что не так ? Почему в хроме отображает нормально, в мозилле всё увеличивается, а в ie вообще не отображает картинку ? Спасибо за ответ.
f32302a49bc74f5493ac04adc9308bd4.jpgb814c038c1cc486781c9497053461194.jpg
  • Вопрос задан
  • 660 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@4604590
JavaScript, HTML/CSS, PHP,MySQL, SuiteCRM/SugarCRM
нашел такой пример, попробуйте

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Растягиваем фоновую картинку в размер окна.
Кроссбраузерный background-size (100% auto)</title>
<style type="text/css">
html { min-height:100%; }
body { padding:0; margin:0; border:0; min-height:100%;
font:14px/1.5em Arial, Helvetica, sans-serif; color: #FFFFFF; text-shadow:1px 1px 0 #000000;
background: #06040C url('images/hs-2007-30-d-web.jpg') top left  fixed no-repeat;
-o-background-size: 100%;
-webkit-background-size:100%;
-moz-background-size:100%;
-khtml-background-size:100%;
background-size: 100%;
}
</style>
<!--[if lt IE 9]>
<style type="text/css">
#container { position: relative; z-index:1; }
#iefix { width: 100%; position:fixed; top:0; bottom: 0; left:0; right:0;
height: expression(
document.getElementsByTagName('body')[0].offsetWidth/400*202 +  'px');
/* 400 - ширина фоновой картинки в пикселях, 202 - её высота */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/hs-2007-30-d-web.jpg', sizingMethod='scale');
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/hs-2007-30-d-web.jpg', sizingMethod='scale');
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
body, html { zoom: 1; }
#iefix { position:absolute; z-index:1;
top: expression(eval(document.documentElement.scrollTop) + 'px' );
}
</style>
<![endif]-->
</head>
<body>
<!--[if lt IE 9]><div id="iefix"></div><![endif]-->
<div id="container">
Тест
</div>
</body>
</html>
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ответы на вопрос 1
SagePtr
@SagePtr
Еда - это святое
Разобраться для начала, почему высота элемента в разных браузерах разная.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Вычислить размер объекта по карте глубин
25 апр. 2024, в 07:37
5000 руб./за проект
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
25 апр. 2024, в 05:29
25000 руб./за проект
Ещё заказы