thunder85: Hintergrund verschwindet ab bestimmter Fenstergröße

Beitrag lesen

SELF-Forum

Hintergrund verschwindet ab bestimmter Fenstergröße

thunder85
– Informationen zu den Bewertungsregeln

Ich habe ein CSS Layout gestaltet, das mit Ebenen arbeitet. Ich habe Hintergrundgrafiken, die fixiert sein sollen, d.h. nicht mit scrollen, wenn die Seite gescrollt wird. Mir ist aufgefallen, dass diese Grafiken ab einer bestimmten Fenstergröße nicht mehr sichtbar sind, sobald ich den Wert 'background-attachment: fixed;' setze. Scheinbar überlagert die vorderere Ebene, obwohl sie keine HG farbe hat, die untere Ebene. Das sieht man sehr schön, wenn man langsam das Fenster vergrößert. Man sieht, wie immer mehr verschwindet, bis Nichts mehr sichtbar ist. Ich finde den Fehler nicht und vielleicht sehen eure Augen den Fehler.

HTML 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>

style.css:

/* 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;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln