CSS stretch bg image wont work in IE_问答_开发者

开发者 https://www.devze.com 2023-04-10 21:06 出处：网络

This is kinda embarrasing for me, since ive been working with CSS for such a long time for a living, that i would be considered an expert.

This is kinda embarrasing for me, since ive been working with CSS for such a long time for a living, that i would be considered an expert. Yet! Experts also learn new things daily.

Well, my problem is, that this sample code with a full stretched Bg image is working fantastic in both Chrome and FF, it should work in IE too (atleast IE8) But i just cant get it to work, the image shows but the text wraps underneat the image like if the content box was not set to relative positioning.

I hope you can help me out.

<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="i开发者_运维知识库mg/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>

Well first of all why would you use <img/> to define the page background pattern. It is more suitable to define this kind of background directly in css. e.g.:

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

CSS stretch bg image wont work in IE

精彩评论

关注公众号

热门标签

图文推荐

CSS stretch bg image wont work in IE

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：