Code:
|-body------------------------|
| |-A2--------------| |
| | |-A3--------| | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| |--| |--| |
| | | |
| | | |
| | | |
| | | |
|--------|-----------|--------|<body> besitzt eine Hintergrundbild: hintergrund.jpg. Das Element <body> ist in css so definiert:
color:#000000;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
line-height: 120%;
background-image:url(hintergrund.jpg);
Im Element <body> befindet sich das div Element A2. Innerhalb von A2 gibt es das div-Kindelement A3.
Beide div-Elemente A2 und A3 besitzen Bilder als Hintergrund mit dem Parameter: background-image. Beide Hintergrundbilder in A2 und A3 fließen ineinander (das Bild A2 geht über seine Grenzen hinaus, in den Bildbereich A3 hinein). Die Seite soll so angelegt sein, dass sich A2 und A3 in der Mitte befinden (siehe Skizze). Die Webseite ist für eine Bildschirmgröße von 1024px Breite optimiert. Daher ist der A3-Bereich 989px breit. Nur wenn der Benutzer eine größere Bildschirmgröße besitzt, soll der A2 Bereich auch sichtbar sein. Mit einer Bildschirmbreite von 1024px soll nur der A3 Bereich sichtbar sein und zusätzlich sollen keine Scrollbalken vertikal zu sehen sein.
Mein folgendes Konstrukt funktioniert leider noch nicht perfekt:
Code:
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
body{
color:#000000;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
/* line-height: 120%;*/
background-image:url(images/cp_hintergrund.jpg);
background-color:#00FF00;
}
.wrapper{
background-image:url(images/cp_hintergrund2.jpg);
background-repeat:no-repeat;
margin:0px auto;
height: 400px;
}
.style1{
background-image:url(images/cp_mittelteil.jpg);
width:989px;
height:400px;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="style1">12345678</div>
</div>
</body>
</html>Suchwörter: überlappend, Bild überlappt 2 div-Bereiche, ineinaderfließende div-Bereiche mit Bild, überlappende Grafik
Zuletzt bearbeitet:
