Hintergrund fixieren

JoePetts · 13.12.2012

Hi Leute,

ich habe hier ein Problem mit einem Hintergrund, weil dieser nicht im Hintergrund bleiben will.

Die Idee ist:

Ich möchte einen Streifen im hintergrund haben, der "fixed" ist und beim Scrollen mitläuft.
Mitlaufen tut der Streifen zwar, bleibt aber nicht im Hintergrund.

CSS

Code:

@charset "UTF-8";
/* ProjektM */


html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background-image:url(../bilder/background2.png);
    background-color:#515151;
}

#streifen {
    margin-top:150px;
    position:fixed;
    z-index:10;
    background-image:url(../bilder/streifen.jpg);
    height:66px;
    width:100%;
    float:none;
}

#wrapper {
    background-color:#133E84;
    background-image:url(../bilder/background4.jpg);
    width:800px;
    height:auto;
    margin:auto;
    -moz-box-shadow: 0px 0px 15px 1px #ED6400;
    -webkit-box-shadow:  0px 0px 15px 1px #ED6400;
    box-shadow: 0px 0px 15px 1px #fff;
    z-index:1;
}

#sidebar {
    float:left;
}

#logo {
    margin-top:200px;
    margin-left:687px;
    background-image:url(../bilder/logo3.png);
    width:120px;
    height:66px;
    position:fixed;
}


.clear {
    clear:left;
}

#inhalt {
    background-color:#fff;
    width:600px;
    height: auto;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
}

#inhalt2 {
    padding-top:20px;
    background-color:#fff;
    width:500px;
    margin: auto;
}

#kopf {
    background-color:#133E84;
    height:150px;
    width:800px;
    margin-left: -100px;
}

.clear {
    clear:left;
}

/* Horizontale-Navi */    

#cssmenu {
    width: 100%;
    height: 27px;
    margin-left:50px;
    margin: 0;
    padding: 0;
    margin-top:10px;
    background: #000000 url(../bilder/bg-bubplastic.gif) top left repeat-x;
}

#cssmenu ul {
    list-style: none;
    margin: 0 0 0 30px;
    padding: 0;

}
#cssmenu ul li {
    float: left;
    margin: 0;
    padding: 0;
    background: transparent url(../bilder/bg-bubplastic-button.gif) top left no-repeat;
}

#cssmenu ul li a {
    display: block;
    height: 27px;
    padding-left: 35px;
    float: auto;
    text-transform: uppercase;
    font-family: 'Helvetica Neue',helvetica,'microsoft sans serif',arial,sans-serif;
    font-size: 70%;
    color: #FFFFFF;
    text-decoration: none;
}

#cssmenu ul li a span {
    display: block;
    float: left;
    height: 22px;
    padding-top: 5px;
    padding-right: 35px;
    background: transparent url(../bilder/bg-bubplastic-button.gif) top right no-repeat;
    cursor: pointer;
}


#cssmenu ul li a:hover,
#cssmenu ul li.active a {
    background: transparent url(../bilder/bg-bubplastic-h-gray.gif) top left no-repeat;
}
#cssmenu ul li a:hover span,
#cssmenu ul li.active a span {
    background: transparent url(../bilder/bg-bubplastic-h-gray.gif) top right no-repeat;
}



footer {
    background-color:#C60;
    width:600px;
    height: 30px;
    margin: 0 auto;
}

HTML

Code:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/main.css">
<title>ProjektM</title>
</head>



<body>

<div id="streifen"></div>

<div id="wrapper">
    

    <div id="sidebar">
        <div id="logo"></div>
    </div>
    
    <div id="inhalt">
    
        <div id="kopf">
        kopf
        </div>
        
        <div id="cssmenu">
              <ul>
                 <li><a href="index.html"><span>Startseite</span></a></li>
                 <li><a href="#"><span>Über Uns</span></a></li>
                 <li><a href="#"><span>Referenzen</span></a></li>
                 <li><a href="#"><span>Impressum</span></a></li>
              </ul>
        </div>
        
        <div id="inhalt2">
       
        </div>
        
    </div>
    
    <footer>
    Footer Inhalt
    </footer>
    

</div>

</body>
</html>

Hätet ihr vielleicht da eine Idee was ich falsch gemacht habe?

developr · 13.12.2012

Du kannst dem Element "html" und "body" jeweils unterschiedliche Hintergründe zuweisen, welche sich dann überlagern. HTML liegt ganz unten, darüber wird der BODY gerendert.

So fixierst du einen Hintergrund:

Code:

background-attachment:fixed;

JoePetts · 14.12.2012

Aber wenn ich dem Body einen Streifen als Hintergrund gebe, dann kann ich das doch nicht mehr beliebig positionieren oder?

Deswegen habe ich extra einen Container mit "Streifen" angelegt, damit ich den frei bewegen kann.

developr · 14.12.2012

Doch... mit "background-position:xpx ypx" ;-).

Du kannst alternativ auch einfach eine Tabelle um alles herumsetzen, welche sich immer automatisch am Browser anpasst.

HTML:

<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="100%" style="background:url(bild.jpg) no-repeat 30px 10px #000">

CONTENT

</td>
</tr>
</table>