CSS stretch bg image не будет работать в IE

#html #css #background #stylesheet

#HTML #css #фон #таблица стилей

Вопрос:

Это немного смущает меня, поскольку я так долго работал с CSS, что меня можно было бы считать экспертом. Пока! Эксперты также ежедневно узнают что-то новое.

Ну, моя проблема в том, что этот пример кода с полностью растянутым изображением Bg отлично работает как в Chrome, так и в FF, он должен работать и в IE (по крайней мере, в IE8), но я просто не могу заставить его работать, изображение отображается, но текст переносится под изображение, как если бы поле содержимого былоне задано относительное позиционирование.

Я надеюсь, что вы сможете мне помочь.

 <html>
<head>
        <style>     body, html {
        margin:0px; padding:0px;
        background-color:#fff;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:12px;

    }
    img.bg {

        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
    }

    @media screen and (max-width: 1024px){
        img.bg {
            left: 50%;
            margin-left: -512px; }
    }



    #spacer { height:20px; }
    #content { width:900px; margin:0 auto; padding:10px;  position:relative; }
    #header { height:117px; }
    #logo { float:left; width:101px; height:117px; }
    #menu { float:left; height:50px; width:749px; margin-left:50px; margin-top:70px;   }

    #menu ul { list-style:none; margin:0px; padding:0px; }
    #menu ul li { padding:0px; margin:0px; float:left; line-height:50px; padding-left:10px; margin-right:10px; }
    h1 { margin:0px; padding:0px; color:#333333; font-size:16px; text-decoration:underline; margin-bottom:10px; }
    #menu ul li a { color:#333; text-decoration:none; }

    #lftmen { float:left; width:140px; margin-top:70px; }
    #lftmen ul { margin:0px; padding:0px; list-style:none; }
    #lftmen ul li { height:30px; background-image:url(img/lftbg.png); border:1px dashed #999; margin-bottom:10px; }
    #lftmen ul li a { color:#fff; line-height:30px; text-decoration:none; margin-left:20px; font-size:14px; }
    #lftmen ul li a:hover { color:#333;  }
    #midcont { line-height:16px; float:left; margin-top:60px; background-image:url(img/contbg.png); width:729px; margin-left:10px; font-size:12px; padding:10px; }




        </style>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
<img src="img/bg.jpg" class="bg" />

    <div id="content">

        <div id="header">
            <div id="logo"><img src="img/logo.png" /></div>
            <div id="menu">
                <ul>
                    <li>Opdatering: Zhoop rekrutere butikker i Aalborg</li>

                </ul>
            </div>
            <div style="clear:both;"></div>
        </div>

        <div id="lftmen">
            <ul>
                <li><a href="index.php">Forside</a></li>
                <li><a href="video.php">Se video</a></li>
                <li><a href="virk.php">Udbyd tilbud</a></li>
                <li><a href="info.php">Information</a></li>
                <li><a href="kontakt.php">Kontakt</a></li>
                <li><a href="../Zhoop.apk">Hent: android</a></li>
            </ul>
        </div>

1. Ваш пример, похоже, прямо из csstricks.com который работает просто отлично css-tricks.com/3458-perfect-full-page-background-image и вы всегда можете использовать jquery, поскольку он поддерживает даже ie 5.5

2. @ArgsKwargs — чтобы исправить вас, jQuery некоторое время назад прекратил поддержку IE5.5. (не то чтобы это имело значение; неужели не может быть никого, кому все еще нужна поддержка IE5.5?)

Ответ №1:

Ну, прежде всего, почему вы должны использовать <img/> для определения шаблона фона страницы. Более подходящим является определение такого фона непосредственно в css. например:

 body {
    background: url(img/bg.jpg) 0 0 no-repeat;
    ...
}