Manni: Skalierung von Bildgrößen entsprechend der Browsergröße

Beitrag lesen

SELF-Forum

Skalierung von Bildgrößen entsprechend der Browsergröße

Manni
– Informationen zu den Bewertungsregeln

Hoi !

Also wie ihr wisst, fahren je verschiedene Nutzer mit unterscheidlichen Auflösungen, und da ich möchte, dass mein Hintergrundbild immer komplett über das ganze Fenster geht, habe ich bisl getrickst. Funzt, soweit so gut.

Nur habe ich normale Bilder eingefügt und da merke ich, dass die auf ner anderen Auflösung sich gegenseitig überlappen bzw. aus dem Bild herauslaufen.
Ich will die jedoch genau wie das Hintergrundbild angepasst haben.

Was hab ich falsch gemacht?

Hier mein html Code mit css

<html>  
<head>  
<title>Hey HO</title>  
  
<style type="text/css">  
html, body {  
  margin:0;  
  padding:0;  
  width:100%;  
  height:100%;  
  overflow:hidden;  
}  
  
body {  
  font-family:sans-serif;  
}  
  
#hintergrund {  
  position:absolute;  
  width:100%;  
  height:100%;  
  z-index:1;  
}  
  
#scrollbereich {  
  position:absolute;  
  top:0;  
  left:0;  
  width:100%;  
  height:100%;  
  overflow:auto;  
  z-index:2;  
}  
  
#inhalt {  
  padding:20px 100px 30px 200px;  
  z-index:2;  
}  
  
</style>  
  
</head>  
<body>  
		<div>  
			<img id="hintergrund" src="Grafiken/Webseite/back.png" alt="Hintergrund" title="Hintergrund" />  
		</div>  
		<div id="scrollbereich">  
		<div id="inhalt">  
	</div>  
	</div>  
		<img id= "3d-earth" src="Grafiken/Webseite/3d-earth.png" alt="3d-earth" title="3d-earth" />  
					<style type="text/css">	  
					#3d-earth{  
					position: absolute;  
					width: 900px;  
					height: auto;  
					left: -350px;  
					top: -350px;  
					z-index:2;  
					}  
					</style>  
		<img id= "Logo" src="Grafiken/Webseite/bosch.png" alt="Logo" title="Logo" />  
					<style type="text/css">	  
					#Logo{  
					position: absolute;  
					width: 700px;  
					height: auto;  
					left: 55%;  
					top: 5%;  
					z-index:3;  
					}  
					</style>  
		<h1>Select your language</h1>  
					<style type="text/css">	  
					h1{  
					font-family: Calibri;  
					font-size: 70pt;  
					color: #fffaf0;  
					position: absolute;  
					left: 25%;  
					top: 35%;  
					z-index:4;  
					}  
					</style>  
		<img id= "deutsch" src="Grafiken/Webseite/Deutsch.png" alt="deutsch" title="deutsch" />  
					<style type="text/css">	  
					#deutsch{  
					position: absolute;  
					width: 300px;  
					height: auto;  
					left: 10%;  
					top: 60%;  
					z-index:4;  
					}  
					</style>  
		<img id= "englisch" src="Grafiken/Webseite/Englisch.png" alt="englisch" title="englisch" />  
					<style type="text/css">	  
					#englisch{  
					position: absolute;  
					width: 300px;  
					height: auto;  
					left: 30%;  
					top: 60%;  
					z-index:4;  
					}  
					</style>  
		<img id= "russisch" src="Grafiken/Webseite/Russisch.png" alt="russisch" title="russisch" />  
					<style type="text/css">	  
					#russisch{  
					position: absolute;  
					width: 300px;  
					height: auto;  
					left: 50%;  
					top: 60%;  
					z-index:4;  
					}  
					</style>  
		<img id= "portugisisch" src="Grafiken/Webseite/Portu.png" alt="portugisisch" title="portugisisch" />  
					<style type="text/css">	  
					#portugisisch{  
					position: absolute;  
					width: 300px;  
					height: auto;  
					left: 70%;  
					top: 60%;  
					z-index:4;  
					}  
					</style>  
		  
		  
</body>  
  
</html>  
  
<!-- -->
Beitrag melden
–
Informationen zu den Bewertungsregeln