Ein bild selbst dynamisch machen

[countryqt30]

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]

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]

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]

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]

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]

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]

gut geht super danke******!