Anmelden | Registrieren | FAQ
Anonymous

Background fixieren

+ Antwort erstellen

2 Beiträge Seite 1 von 1


Background fixieren

von II.IB. » Do Dez 13, 2012 12:40 pm

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: Alles auswählen
@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: Alles auswählen
<!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?
Benutzeravatar

II.IB.

  • Beiträge: 1
  • Registriert: Do Dez 13, 2012 12:38 pm

Re: Background fixieren

von XainPro » Fr Dez 14, 2012 7:01 pm

Code: Alles auswählen
body {
    background-image:url(../bilder/background2.png);
    background-color:#515151;
background-repeat:no-repeat;
background-attachment:fixed;
}
Benutzeravatar

XainPro

  • Beiträge: 3933
  • Registriert: Fr Feb 17, 2012 8:10 pm


+ Antwort erstellen

Seite 1 von 1