# background-image im Anzeigebereich skalieren



## smyle (19. April 2010)

Ich fang gleich mit meinem Problem an...

Ich habe zwei Hintergrundbilder.
Eines muss nach rechts immer 100% der Tabellenzeile abdecken und das andere muss immer 100% der Tabellenspalte abdeken.
Nun haben ich folgender CSS:

```
<td colspan="4" style="background-image: url(../../bilder/balken_oben.jpg); vertical-align:top; height:30px; width:100%; margin-bottom:0px; margin-left:0px; margin-left:0px; margin-top:0px; background-repeat:no-repeat;">

<td style="background: url(../..//bilder/links.jpg) no-repeat scroll 0 0 transparent; background-size: 100%; vertical-align:top; float:left; height:100%; width:224px; margin-bottom:0px; margin-left:0px; margin-left:0px; margin-top:0px;">
```

Der td mit dem Bild "Balken" muss nach rechts 100% breit sein und das andere, nach unten, egal wie gross die Seite wird.  Natürlich darf sich das Bild nicht wiederholen.

Was habe ich an meinem CSS falsch?


----------



## Maik (19. April 2010)

smyle hat gesagt.:


> Der td mit dem Bild "Balken" muss nach rechts 100% breit sein und das andere, nach unten, egal wie gross die Seite wird.  Natürlich darf sich das Bild nicht wiederholen.
> 
> Was habe ich an meinem CSS falsch?


Um die Hintergrundbilder zu skalieren (hier in der Breite und Höhe strecken), steht dir  in CSS3 background-size zur Verfügung - Browserunterstützung vorausgesetzt.

Wird dies von einem Browser nicht dargestellt, interpretiert er diese CSS3-Eigenschaft noch nicht - wie auch im Beispiel des genannten Links.

mfg Maik


----------



## smyle (20. April 2010)

Ach so, ok.. schade funktioniert dies nicht, denn ich hatte Background-size verwendet.

Gibt es den irgend ein Befehl den man zu beginn der Seite angeben kann, damit der Browser weiss das er nun CSS3 verwenden soll? Oder eine andere möglichkeit um ein Hintergrundbild einzubinden und dieser in der ganzen Spalte anzeigen lassen? den füreher hatten die alte Homepages dies auch schon.


----------



## Maik (20. April 2010)

smyle hat gesagt.:


> Gibt es den irgend ein Befehl den man zu beginn der Seite angeben kann, damit der Browser weiss das er nun CSS3 verwenden soll?


Nö. Wenn der Browser eine der CSS3-Eigenschaften noch nicht unterstützt, würde dies auch nicht weiterhelfen.



smyle hat gesagt.:


> Oder eine andere möglichkeit um ein Hintergrundbild einzubinden und dieser in der ganzen Spalte anzeigen lassen? den füreher hatten die alte Homepages dies auch schon.


Da sich Hintergrundbilder nur über die genannte CSS-Eigenschaft skalieren lassen, müsstest du anstelle der Hintergrundbilder <img>-Elemente verwenden, und diese mittels width und height strecken. So wurde es bislang in solchen Seiten umgesetzt.

mfg Maik


----------



## qw235gf (7. Juni 2010)

Woher weiss ich ob der Firefox 3.6 CSS3 Unterstütz?
Der IE 8 tut das nämlich nicht. 
Ist das so?


----------



## Maik (7. Juni 2010)

Warum stellst du deine Frage nicht unter deinem Account, wo du doch eben noch im Forum anwesend warst? Eure gleichlautende IP-Adresse verrät dies nämlich.

Zudem ist die Frage sehr pauschal formuliert, da CSS3 weitaus mehr umfasst, wie blos die hier angesprochene background-size-Eigenschaft, und es so keine allgemein gültige Aussage gibt, welcher Browser CSS3 unterstützt.

http://www.css3.info/preview/ gibt dir Auskunft, welche CSS3-Eigenschaft von welchem Browser schon unterstützt wird.

mfg Maik


----------



## qw235gf (7. Juni 2010)

Weil sie nicht da ist und ich ihr passwort nicht kenne und sie sich kurz bevor ich an ihrem PC gekommen bin, sich abgemeldet hat.
Es spilt ja keine Rolle.


Sie hat mich gebeten herauszufinden wie man das problem mit der höhe und der Breite des hintergundbildes anpassen kann. 
Und so wie es ausschaut  http://www.css3.info/preview/background-size/ kann ich, sie das vergessen.

Gibt es den eine möglichkeit einen Farbenverlauf in einer Tabellenspalte zu machen. (Anstelle eines bildes die hintergrundfarbe mit Verlauf abändern).


----------



## Maik (7. Juni 2010)

Ein Farbverlauf ist meines Wissens mit einer Grafik möglich, und wie sich ein Bild in Form eines <img>-Elements strecken lässt, hab ich hier auch schon in Post #4 kurz erläutert.

mfg Maik


----------



## qw235gf (7. Juni 2010)

Ja, das habe ich geshen. Jedoch kann ich wenn ich mein Bild mit einem <img scr=""> einbinde kein Text darüber legen, da es ja kein hintergrund ist. 
Das ist unser Problem.


----------



## matth-ee (7. Juni 2010)

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


----------



## Maik (7. Juni 2010)

matth-ee hat gesagt.:


> Hi!
> 
> Dieses Problem lässt sich zb so beheben:
> 
> ...


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

mfg Maik


----------



## matth-ee (7. Juni 2010)

Maik hat gesagt.:


> 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 (7. Juni 2010)

matth-ee hat gesagt.:


> 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 (7. Juni 2010)

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


			
				http://www.css3.info/preview/background-size/ hat gesagt.:
			
		

> *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 (8. Juni 2010)

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 (8. Juni 2010)

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


----------

