Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

ruffy85 · 18.06.2009

Ich sehe den Wald vor lauter Bäumen nicht, oder anders gesagt, ich finde den Fehler nicht.

Problem:
Ich habe ein Weblayout erstellt, dass mit zwei Ebenen arbeitet. Ebene 1 enthält die fixierten Hintergrundbilder. Ebene 2 die eigentliche Webseite. Für die Swirls oben links habe ich den Flag fixed gesetzt. Nun werden diese Swirls nur bis zu einer bestimmten Größe des Browserfensters angezeigt, danach werden sie von der vorderen Ebene überlagert, bis sie nicht mehr zu sehen sind.

Hier die derzeitige Seite im Live Betrieb:
RM Design - The Finest in Art & Design

HTML Code:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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=iso-8859-1" />
    <title>RM Design - The Finest in Art & Design</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="joomla.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>
    <div class="swirlsoben">
        <div class="swirlslio"></div><div class="swirlsreo"></div>
    </div>
    
    <div class="webseite">
        <div class="eckeoli"></div><div class="mitteoben"></div><div class="eckeore"></div>
        <div class="eckeoliin"></div><div class="mittenavi">Start | Grafikdesign | Webdesign | Fotografie | Kontakt | Über uns</div><div class="eckeorein"></div>
        <div class="randweissheaderli"></div><div class="header"></div><div class="randweissheaderre"></div>
        <div class="headerabstand"></div>
    </div>
    <div class="swirlsunten"></div>
    

</body>
</html>

CSS Code:

Code:

/* CSS Doc */

body, html {
    background-color: #646567;
    min-height: 750px;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: small;
}

.webseite {
    width: 880px;
    height: auto;
    margin: auto;
    position: absolute;
    top: 25px; left: 50%;
    margin-left: -440px;
    z-index: 2;
}

.eckeoli {
    width: 20px;
    height: 9px;
    background-image: url(eckeoli.png);
    float: left;
}

.mitteoben {
    width: 840px;
    height: 9px;
    background-color: white;
    float: left;
}

.eckeore {
    width: 20px;
    height: 9px;
    background-image: url(eckeore.png);
    float: left;
}

.eckeoliin {
    width: 20px;
    height: 20px;
    background-image: url(eckeoliinnen.png);
    float: left;
}

.mittenavi {
    width: 840px;
    height: 20px;
    background-image: url(header_verlauf.png);
    float: left;
    color: white;
}

.randweissheaderli {
    width: 9px;
    height: 115px;
    background-color: white;
    float: left;
}

.randweissheaderre {
    width: 11px;
    height: 115px;
    background-color: white;
    float: left;
}

.header {
    width: 860px;
    height: 115px;
    background-image: url(headerhg.png);
    float: left;
}

.headerabstand {
    width: 880px;
    height: 12px;
    background-color: white;
    float: left;
}

.eckeorein {
    width: 20px;
    height: 20px;
    background-image: url(eckeoreinnen.png);
    float: left;
}

.swirlsoben {
    margin: auto;
    width: 990px;
    height: 236px;
    background-color: #646567;
    z-index: 1;
    position: absolute;
    top: 0px; left: 50%;
    margin-left: -495px;
    
}

.swirlslio {
    width: 106px;
    height: 100%;
    background: url(swirllio.png) no-repeat fixed;
    float: left;
    padding: 0px;

}

.swirlsreo {
    width: 106px;
    height: 100%;
    background-image: url(swirlreo.png);
    float: right;
    background-repeat: no-repeat;
}
    
.webseite-test {
    width: 892px;
    height: 700px;
    margin: auto;
    background-image: url(seite_ohne_hg.png);
    background-repeat:no-repeat;
    
}

.swirlsunten {
    width: 990px;
    height: 100%;
    background-image: url(swirls_unten.png);
    z-index: 1;
    background-repeat:no-repeat;
    background-position:center bottom;
    position: absolute;
    bottom: 0px; left: 50%;
    margin-left: -495px;
}

Sieht jemand den Fehler? hat jemand Ähnliches erlebt und kennt einen Workaround? Bin für jeden Tipp dankbar.

Thyras · 18.06.2009

AW: Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

Ich würde es eigentlich nochmal neu strukturieren, soviel ist es ja noch nicht. Dann erspart man sich spätere Probleme, als da jetzt lange dran rumzubasteln. Geht sicher irgendwie, aber mit diesen left: 50% und riesigen Negativ-Margins find' ich das so recht unschön gelöst.

Stilbruch · 18.06.2009

AW: Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

Thyras schrieb:
Ich würde es eigentlich nochmal neu strukturieren, soviel ist es ja noch nicht. Dann erspart man sich spätere Probleme, als da jetzt lange dran rumzubasteln. Geht sicher irgendwie, aber mit diesen left: 50% und riesigen Negativ-Margins find' ich das so recht unschön gelöst.

Ist halt ne schnelle zentriermethode...
würde aber das ganz auch neu und sauberer Strukturieren...

ruffy85 · 18.06.2009

AW: Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

Hmm, eigentlich habt ihr Recht. Wüsste nicht, wie ich sonst, abhängig vom Viewport zentrieren sollte und wundere mich darüber, dass der beschriebene Fehler nur auftritt, wenn ich den Flag fixed setze.

Die inkludierende Box swirlsoben, an denen sich die beiden inneren Boxen swirlslio und swirlsreo orinetieren sollten, skaliert korrekt mit.

Irgendwie muss ich die anders fixieren oder sie erst einmal mit scrollen lassen.

Anderer Aufbau, hmm. Was schlagt ihr vor? Wollte schön einfach mit Box oben und Box unten, sowie Box auf höherer Ebene, die Webseite enthält. Ist doch recht einfach gehalten.

Also alles in eine große Box ist doch blöd. Vorallem kommt es immer wieder zu Ebenenkonflikten, deswegen habe ich mich dafür entschieden.

Rakete · 18.06.2009

AW: Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

Wenn du dem Div swirlsoben eine Hintergrundfarbe gibst, die man vor dem Hintergrund sehen kann

, z.B. red, dann siehst du dass genau dieser Div deine Grafik überlagert.

Du solltest nicht position:absolute und float und z-index mischen, weil diese Angaben sich gegenseitig beeinflußen/behindern können.

ruffy85 · 18.06.2009

AW: Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

Rakete, habe ich gerade mit einem rahmen gesehen. Für den linken oberen Swirl kann ich position:fixed verwenden und ein Bild einsetzen <img src...>. Für den rechten läuft das nicht. Hat da jemand eine Idee?

Ich sehe keine Möglichkeit, es alternativ zu implementieren? Sonst geht wieder die Zentrierung flöten. Und eine fixierte Ausrichtung (no scroll), die sich nicht am <body> orientiert, ist mir nicht bekannt.

Lasse mir aber gerne die Augen öffnen.

EDIT2:
So, nun hat's mir gereicht. Ein Container für oben mit einem Bild und ein Container für unten mit einem Bild. Läuft nun. Quick & Dirty, aber was solls. Und Laderzeit q.q Aber das ist der beste Kompromiss.