background-image im Anzeigebereich skalieren

[Maik]

Hi!

Dieses Problem lässt sich zb so beheben:

<div style='position:relative;'>
   <div>Hier steht ein text</div>
   <img src='ordner/bild.jpg' style='position:absolute; z-index:-1; top:0px; left:0px;'>
</div>

lg

Nicht zu vergessen die angesprochene height- und width-Eigenschaft, um das Grafikelement innerhalb seines Anzeigebereichs entsprechend zu strecken ;-)

mfg Maik

 

[matth-ee]

Nicht zu vergessen die angesprochene height- und width-Eigenschaft, um das Grafikelement entsprechend zu strecken ;-)

mfg Maik

Danke für den Hinweis - hab ich im Tippstress ganz vergessen

müsste heißen:

<div style='position:relative;'>
   <div>Hier steht ein text</div>
   <img src='images/airfield_fw_2009.jpg' style='position:absolute; z-index:-1; top:0px; left:0px; width:100px; height:200px;'>
</div>

Nur ums noch zu erwähnen: man kann die Höhe natürlich auch in % angeben

lg

 

[Maik]

Nur ums noch zu erwähnen: man kann die Höhe natürlich auch in % angeben

Was hier wohl eher angebracht sein dürfte, da die Dimensionen der Tabellenzellen nicht durchweg absolut sind, wie es der eingangs gezeigte Codeschnipsel verdeutlicht.

mfg Maik

 

[Maik]

Falls dieser Hinweis beim Lesen meines empfohlenen Artikels noch nicht darin genannt, oder er übersehen wurde:

Update: Now supported in the latest firefox nightlies, -moz-background-size.

Für Farbverläufe stellt CSS3 linear-/radial-gradients bereit:

• CSS 3 Gradients
• CSS3 im Detail: Background Gradients

mfg Maik

 

[smyle]

Hallo, nun bin ich wieder da
Gestern sind wir recht weit gekommen:

Bereich eins:

				<td colspan="4" style="vertical-align:top; height:30px; width:100%; margin:0px; position:relative;">
				
					<div style="vertical-align:middle; margin:5px; position:fixed; width:100%; border:thick #CC0066;">
						<div style="float:left;"><a href="../login/logout.php">Abmelden</a></div>	<div style="float:right;font-family:Verdana;">Angemeldet als <?PHP echo $kuerzel; ?></div>
					</div>					
					<img src="../../bilder/allgemein_balken_oben_1.jpg" width="100%" height="30px" style="margin:0px; style='position:absolute; z-index:-1; top:0px; left:0px;">										
				</td>

Bereich zwei:

				<td style="vertical-align:top; height:100%; width:224px; margin:0px; position:relative;">
					<div style="position:fixed; margin-left:5px;">	
						<?PHP links($idB) ?>
				    </div>
					<img src="../..//bilder/allgemein_links_1.jpg" width="224px" height="100%" style="margin:0px; style='position:absolute; z-index:-1; top:0px; left:0px;">
				</td>

Das sieht schon sehr gut aus. Aber wenn ich nun mit dem unteren Balken nach rechts scrolle oder nach links kommt die Texte mit.
Das sollte nicht sein.

Und wenn ich nun den Scrollbalken auf der rechten Seite des Webbrowsers verwende und nach unten oder nach oben Scrolle, kommt der "Bereich eins" auch mit. Der Bereich zweich kann in diesem Fall hier mitscrollen.

Was muss ich im Code umschreiben damit diese zwei Problemchen gelöst werden?

Vielen Dank im voraus für die Hilfe.

 

[Maik]

Hi,

dein beschriebenes Verhalten beim Scrollen deutet auf die Positionsart position:fixed hin (siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position).

Wähle stattdessen eine relative oder absolute Positionierung.

mfg Maik