Jump to content
  • 0

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


Lrad
 Share

Question

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

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

Я вырезал 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 by Lrad
Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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


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

Edited by DStereo
Link to comment
Share on other sites

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

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

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

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

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

Edited by systemiv
Link to comment
Share on other sites

  • 0
А если вместо создания дополнительного блока прописать тэгу 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 by Lrad
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy