✔ Hintergrundbilder über zwei div-Bereiche passgenau

Status
Nicht offen für weitere Antworten.
Das kann in diesem Fall auch nicht funktionieren, da alle übrigen Blöcke eine feste Breite besitzen.

Und welchen Sinn sollen zudem bei #container drei gleichlautende Werte für width,min-width und max-width ergeben?

Von deiner Vorstellung ausgehend, wann welcher Bereich des Hintergrunds im Fenster sichtbar sein soll, sollte es vollkommen genügen, den "Boxenhintergrund" im .wrapper-Hintergrundbild in der horizontalen Bildmitte zu platzieren, den Block .wrapper mit einer relativen Breite width:100% auszustatten, und darin das Hintergrundbild mittels background-position:center top horizontal zu zentrieren.

Wird nun das Browserfenster in der Horizontalen verkleinert, bleiben der "Boxenhintergrund" und die Box .style1 übereinander liegen, und die Außenbereiche des .wrapper-Hintergrundbilds verschwinden im linken und rechten "Niemandsland" des Viewports.

mfg Maik
 
Wenn ich bis hierher jetzt alles richtig verstanden habe, soll es doch hierauf abzielen:

preview_1024.jpg preview_1280.jpg
v.l.n.r.: 1024px. 1280px

Et voilà :)
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-06-01">

<title>tutorials.de | demo_NTDY</title>

<style type="text/css">
<!--
*{
        margin:0;
        padding:0;
}

* html {
        overflow:auto;
}

body{
        color:#000000;
        font-family:Arial,Helvetica,sans-serif;
        font-size:14px;
        background:url(cp_hintergrund.jpg) repeat-x;
        text-align:center;
        overflow-y:hidden;
}

.wrapper{
        background:url(cp_hintergrund2.jpg) no-repeat center top;
        height:400px;
        width:100%;
        min-width:989px;
}

.style1{
        background:url(cp_mittelteil.jpg);
        width:989px;
        height:400px;
        margin:0px auto;
        text-align:left;
        position:relative;
        top:130px;
}
-->
</style>

</head>
<body>

<div class="wrapper">
        <div class="style1">
             <p>12345678</p>
        </div>
</div>

</body>
</html>

Im Anhang das Beispiel incl. der überarbeiteten Grafik "cp_hintergrund.jpg".

mfg Maik
 

Anhänge

  • demo_NTDY.zip
    50,9 KB · Aufrufe: 23
Perfekt.
Ich wollte schon gerade den Beitrag als "Erledigt" ansehen. Ich hoffe, dass CSS irgendwann einmal einfacher wird. :)

Vielen vielen Dank.

Ist sicherlich auch nützlich für andere User.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück