# Ein bild selbst dynamisch machen



## countryqt30 (22. Oktober 2010)

Hallihalöchen! 

Ich habe auf einer webseite etwas entdeckt, was ich sehr sehr interessant fand:
nämlich ändert sich das headerlogo "dynamisch" zur browser größe.
Es scheint so:
3 bilder:
eines links, eines rechts und eines in der mitte als "hintergrund".
Aber das "hintergrundbild" ändert seine größe auch dynamic.
Beispiellink hier

Wie macht man so etwas?

Meine ideen:
z-index sowie position: absolute.


----------



## SpiceLab (22. Oktober 2010)

Das Hintergrundbild ändert nicht seine Größe, sondern im skalierbaren Anzeigebereich von *div.Header-jpeg* seine horizontale Position (background-position), die mit *center* festgelegt ist.

Verringert sich die Elementbreite, rückt das Hintergrundbild nach links. Wird sie wieder erhöht, "wandert" es nach rechts.


----------



## countryqt30 (22. Oktober 2010)

Du meinst es ist z.b. 800 px breit, aber nur die rechte hälfte wird angezeigt, und die andere weggeschnitten ( bei entsprechender browserfenstergröße ). 
Okay.
Wie kann man so etwas denn tuen? Wie sieht das im code aus?
( und wie dann die anderen beiden bilder so drüber gelegt?)


----------



## SpiceLab (22. Oktober 2010)

countryqt30 hat gesagt.:


> Wie kann man so etwas denn tuen? Wie sieht das im code aus?


 Schau ihn dir doch einfach an - er ist schließlich für jedermann frei zugänglich :suspekt:


```
<div class="Header">
    <div class="Header-jpeg"></div>
	<div class="logo">
	<img src="/templates/icons004/logo_schrift_trans.gif" align="right" hspace=40>
         <img src="/templates/icons004/baum3.gif">
      	</div>
</div>
```


```
/* begin Header */
div.Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 798px;
	height: 200px;
}

div.Header-jpeg
{
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	width: 798px;
	height: 200px;
	background-image: url('../images/Header.jpg');
	background-repeat: no-repeat;
	background-position: center center;
}
/* end Header */


/* begin Logo */
.logo
{
	display : block;
	position: absolute;
	left: 16px;
	top: 12px;
	width: 782px;
}

...
/* end Logo */
```


----------



## countryqt30 (23. Oktober 2010)

Hm.. okay..
Aber nur mit diesen informationen kommt man nicht zum gleichen Ergebnis.
Passt alles, nur der hintergrund verändert sich noch nicht
( bzw größe ändert sich nicht mit der browsergröße)


----------



## SpiceLab (23. Oktober 2010)

Sowas dummes aber auch 

Deine vermißten Infos hättest du jederzeit in einem  weiteren eingebundenen Stylesheet einsehen können, denn wie schon gestern erwähnt, ist der HTML-/CSS-Quellcode  auch für dich frei zugänglich


----------



## countryqt30 (23. Oktober 2010)

gut geht super danke******!


----------

