Проблема с background в IE

Lrad · March 14, 2012

Здравствуйте всем!

Необходимо на фон страницы поставить градиент(сверху фон светлее).

Я вырезал 2 картинки(фиксированной высоты первую, где градиент и вторую просто для фона)

Вставляю следующим образом:


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
	<meta name="author" content="" />    
	<title></title>
    <link href="css/style.css" rel="stylesheet" />
<!--[if lt IE 9]>      
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

</body>
</html>


*{
    margin:0;
    padding:0;
}

body {
    background: url(../images/bg.jpg), url(../images/bg-bottom.jpg);
    background-repeat: repeat-x, repeat;
    background-position: top, bottom;
    width: 100%;
    min-height: 100%
}

Работает во всех браузерах, кроме IE 6-8.(нет фона вообще никакого) В IE 9 работает нормально.

Что я делаю не так?

Или есть другой вообще вариант размещать градиентный background ?

Edited March 14, 2012 by Lrad

wildhind · March 14, 2012

странно, что работает.

body { min-height: 100% }

эта высота — 100% от чего?

Edited March 14, 2012 by wildhind

Lrad · March 14, 2012

Я просто привел часть кода.

min-height: 100% удаляю - тоже самое

wildhind · March 14, 2012

конечно то же самое.

Ведь было непонятно, от какой величины вычислять 100% — так и всё равно, было это правило или не было его.

Почему для html не указано height: 100%?

br3t · March 14, 2012

У IE непоследней версии есть проблемы с множественным бекграундом

Решается просто - <div> на всю страницу с фоном №2, у body - фон №1

wildhind · March 14, 2012

ох ёлки ж фон ещё и множественный ну тогда всё ясно

Lrad · March 14, 2012

можно сделать по другому как-нибудь?

Этот градиент по высоте больше шапки получается. То-есть его просто в шапку не вставить. Или сдвигать все блоки, которые ниже вверх. Это не совсем правильно будет.

С div со вторым фоном работает, но как его тогда размещать?

Если просто ставить - начинается с самого верха, закрывая фон 1

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

Не оптимально :facepalmxd:

Может вообще изначально нужно как то по другому поступать?

DStereo · March 14, 2012

можно сделать по другому как-нибудь?
Этот градиент по высоте больше шапки получается. То-есть его просто в шапку не вставить. Или сдвигать все блоки, которые ниже вверх. Это не совсем правильно будет.
С div со вторым фоном работает, но как его тогда размещать?
Если просто ставить - начинается с самого верха, закрывая фон 1
Если давать отступ - тогда придется шапку, топ меню, часть контента с сайдбарами тоже смещать вверх.
Не оптимально
Может вообще изначально нужно как то по другому поступать?

Вырежте картинку с градиентом, а все остальное залейте фоновым цветом. Например:


background:#fff url(../images/bg.jpg) repeat-x 0 100%;

Edited March 14, 2012 by DStereo

Lrad · March 14, 2012

В том то и дело, что там не просто цвет фона.

Что типа узорчика...

br3t · March 14, 2012

И? http://jsfiddle.net/br3t/YKDRs/

Lrad · March 14, 2012

По вашей ссылке div идет сначала сверху. Он перекрывает фон.

А нужно чтобы он шел ниже на 450 px(высота градиента )

br3t · March 14, 2012

Так покажите, как делаете вы и что у вас не получается

Lrad · March 14, 2012

Как делаю - в первом посте написано с кодом.

Кроме IE9 - не работает в других IE.

Изобразил схематично..

systemiv · March 14, 2012

У IE непоследней версии есть проблемы с множественным бекграундом
Решается просто - <div> на всю страницу с фоном №2, у body - фон №1

А если вмсето создания дополнительного блока прописать тэгу html первый фон, а body второй фон

Возможно проблема в том что у Вас идёт не градиен, а уменьшение opacity, в фотошопе это легко спутать если не увеличивать и не смотреть вырезанный блок шириной в 1пх.

Возможна проблема из-за этого. а вообще насколько я понял Вам просто нужно body задать свойство о котором писал DStereo

Edited March 14, 2012 by systemiv

br3t · March 14, 2012

вот вам такой вариант http://jsfiddle.net/br3t/YKDRs/2/

Lrad · March 14, 2012

А если вместо создания дополнительного блока прописать тэгу html первый фон, а body второй фон

Все получилось!

Все проанализировав я сделал по варианту br3t


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
	<meta name="author" content="" />    
	<title>ОНазвание сайта</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link href="css/style.css" rel="stylesheet" />
<!--[if lt IE 9]>      
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class='wrapper'>
    <div class='header'>Проблема с background в IE</div>
    <div class='content'>

    </div>
</div>
</body>
</html>


*{
	margin:0;
	padding:0;
}

body {
    background: url(../images/bg-bottom.jpg)repeat;
}
.header {
    color: #F00;
    font-size: 150%;
}
.wrapper {
    background: url(../images/bg.jpg) repeat-x ;
    height: 1500px;
}

Спасибо

Edited March 14, 2012 by Lrad

Sign In

Проблема с background в IE

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information