background-image im Anzeigebereich skalieren

S

smyle

Erfahrenes Mitglied
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:
HTML: 
<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?
 
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?
Zum Vergrößern anklicken....
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
 
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.
 
Zuletzt bearbeitet:
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?
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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
 
Woher weiss ich ob der Firefox 3.6 CSS3 Unterstütz?
Der IE 8 tut das nämlich nicht.
Ist das so?
 
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
 
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).
 
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
 
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.
 
Hi!

Dieses Problem lässt sich zb so beheben:

HTML: 
<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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück