Zwei Hintergründe

Blackout289 · 22.08.2011

Heyoo,

hab momentan keine Idee wie ich das anstellen soll.
Folgende Situation:
Ich möchte zwei Hintergründe festlegen, welche sich bis zum Ende des Bildschirms "repeaten", also der linke nach links - der rechte nach rechts
-->

HINTERGRUND1-REPEAT.....|DIV mit Breite 960px|HINTERGRUND2-REPEAT.....

Hat jemand n Vorschlag wie ich das umsetzen kann??

MfG und Dankeschön

Rata · 23.08.2011

AW: Zwei Hintergründe

Wie wär's denn, Du pappst die nebeneinander und zentrierst?
Kommt aber auf die Grafiken an.

Lieber Gruß
Rata

8)

Chriss1987 · 23.08.2011

AW: Zwei Hintergründe

Hi,

du könntest einfach zwei DIV's jeweils von der Mitte nach rechts, bzw. links laufen lassen, das ganze dann hinter den eigentlichen Content setzen und mit deinem BG's füllen. hier mal ein Beispiel:

index.html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>BEND - Rohr-Biegetabelle</title>

        <link rel="stylesheet" type="text/css" media="all" href="main.css" />
    </head>

    <body>
        <div id="bgLeft"></div>
        <div id="bgRight"></div>
        
        <div id="mainDiv">
            <hr />
            <hr />
            <hr />
            <hr />
            <hr />
            <hr />
            <hr />
            <hr />
            <hr />
        </div>
    </body>
</html>

main.css:

Code:

@charset "utf-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
    border: 0;
}

/* linker BG */
div#bgLeft {
    position: fixed;
    left: 0;
    right: 50%;
    top: 0;
    bottom: 0;
    z-index: -1;
    
    background-color: #f00;
}

/* rechter BG */
div#bgRight {
    position: fixed;
    left: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    
    background-color: #0f0;
}

/* mainDiv */
div#mainDiv {
    position: relative;
    width: 960px;
    height: 1600px;
    margin: 15px auto 15px;
    
    background-color: #00f;
}

div#mainDiv hr {
    width: 100%;
    border-bottom: dotted 2px #fff;
    padding-top: 160px;
}

HTH
Schöne Grüße aus dem Sauerland!
Chriss

Blackout289 · 24.08.2011

AW: Zwei Hintergründe

Danke für den Ansatz, habs mit position absolute gelöst, weil der Hintergrund nur an der eine Stelle sein darf ;D