CSS: Hintergrund-Bild strecken (fit 2 size)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anfangen
angeben
bauen
benutzen
bild
bringen
browser
code
hintergrundbild
http
image
info
jemand
layout
semantik
strecke
tag
typ
url
weben
-
Hallo,
leider finde ich nicht heraus, wie ich in CSS ein Hintergrundtag/bild">bild so definiere,
dass es auf eine dynamische Breite angepasst wird,
also: "gestreckt" oder "gestaucht" (je nach dem, ob "größer" oder "kleiner" als die Original-Image-Size)
ich will ein DIV dessen Breite sich auf verschiedenen Seiten ändert,
aber dabei immer das gleiche Hintergrund-Bild haben soll, auf die Größe angepasst.
(die DIV-Breite variiert so zwischen ca. 230px und 510px)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi,
Hintergrundbilder lassen sich per CSS nicht strecken, du müsstest sie wohl als IMG tag angeben.
Grüsse
Color -
Hoi. Es gibt keine Browserübergreifende CSS-Lösung. Firefox bietet dir diese Möglichkeit, andere moderne Browser sicherlich auch, aber ich glaube kaum, dass du das im IE umsetzen kannst ;)
-
color schrieb:
Hi,
Hintergrundbilder lassen sich per CSS nicht strecken, du müsstest sie wohl als IMG tag angeben.
Grüsse
Color
Dieser Typ hier hat eine Lösung gefunden ein Hintergrundbild per css auf 100% x 100% zu bringen
http://www.cssplay.co.uk/layouts/background.html
Beitrag zuletzt geändert: 10.10.2009 0:16:33 von simuliertes -
simuliertes schrieb:
Dieser Typ hier hat eine Lösung gefunden ein Hintergrundbild per css auf 100% x 100% zu bringen
http://www.cssplay.co.uk/layouts/background.html
Richtig, dieser Typ verwendet aber ein IMG das eine Höhe und Breite von 100% hat. Es ist somit kein background-image mehr.
Das Ganze funktioniert dann indem er dem body/html-Tags ebenfalls 100% gibt und margin/padding 0px.
Grüsse
Color -
color schrieb:
[..]
Richtig, dieser Typ verwendet aber ein IMG das eine Höhe und Breite von 100% hat. Es ist somit kein background-image
[..]
<SPAM>
Ja natürlich ist es kein bachground-imag.
Aber es ist ein Hintergrundbild was sich mit der Fenstergröße ändert.
Und wie das erreicht wurde gehört für mich nun mal zu irgend welchen akademischen Diskussionen da sich otto-normal-surfer nun einmal die Seite und nicht den Code dahinter anschaut.
Beitrag zuletzt geändert: 10.10.2009 0:46:51 von simuliertes -
<respam>
mmobg schrieb: Hallo,
leider finde ich nicht heraus, wie ich in CSS ein Hintergrundbild so definiere,
dass es auf eine dynamische Breite angepasst wird,
also: "gestreckt" oder "gestaucht" (je nach dem, ob "größer" oder "kleiner" als die Original-Image-Size)
-
hm, wie wäre es damit:
? Ist jetzt nur so eine ungetestete Idee...<img src="foo.jpg" style="position:absolute; top:0px; left:0px; height:100%; width:100%; z-index:-1;"> -
color schrieb: Hintergrundbilder lassen sich per CSS nicht strecken, du müsstest sie wohl als IMG tag angeben.
Nunja, ganz so schlimm sieht die Sache nun auch wieder nicht aus.
Mit CSS3 wird ein neues Attribut background-size eingebürgert, welches dieses Problem behebt. Eine Info findest du hier, sowieso die zugehörigen Browser-Präfixe. Dabei kannste auch gleich sehen, welche Browser dies überhaupt schon unterstützen. Da sieht es gar nicht mal soo schlecht aus.
Ein img-Tag zu benutzen, wäre sicherlich der falsche Ansatz. Das ist in meinen Augen ein grober Verstoß gegen die Semantik, sowohl zweifle ich an der Barrierefreiheit (zumindest mal in Hinsicht von Druckstylesheets etc.). -
Hi, entweder der IMG Tag oder die Bilder gleich in der richtigen Größe abspeichern, auf CSS3 zu bauen ist wohl derzeit noch unsemantischer als der IMG Tag, schon weils erst entwickelt wird.
Dazu kommt das 50 % der user im Netz damit nicht anfangen können weil viele ihren Browser nicht updaten. Derzeit ist es halt nicht machtbar mit CSS.
Wenn jemand sagt er benutze Arial weil 99% aller user diese Schrift haben ist das in Ordnung, wenn man sagt "ab jetzt nurnoch mit CSS3 .." ist meiner Meinung nach absolut fehl im Web.
Dann können wir auch wieder anfangen mit iFrames zu arbeiten, is zwar total aus der Mode, aber wenns sowieso kaum jemand anschauen kann, machts ja nichts.
Grüsse
Color -
Ich würde mich auch auf die Seite des IMG-Tags stellen, da es im moment noch nicht möglich ist in CSS einen background zu strecken und folgenden Code vorschlagen:
<html> <body> <style type="text/css"> img { position: absolute; top: 0; left: 0; z-index: 1; } div { position: absolute; z-index: 2; } </style> <img src="Background.png" width="100%" height="100%"> <center> <div> DEIN WEBSEITENINHALT! </div> </body> </html> -
color schrieb: Hi, entweder der IMG Tag oder die Bilder gleich in der richtigen Größe abspeichern, auf CSS3 zu bauen ist wohl derzeit noch unsemantischer als der IMG Tag, schon weils erst entwickelt wird.
Hm. Das ist schon wieder fehlerhaft
Zunächst einmal zum IMG Tag: Ein img-Tag ist eine inhaltliche Ebene im Webdesign. Das heißt letztlich, dass dem ganzen eine Bedeutung zukommt. Ein Hintergrundbild ist in diesem Sinne inhaltslos, das sollte doch klar sein? Somit ist die Verwendung von einem img Tag, wie oben beschreiben, schlichtweg falsch und unsemantisch.
Da gerade das Wort "unsemantisch" fiel in Zusammenhang mit CSS3, muss ich das auch mal verbessern. Der Einsatz von CSS3 hat nichts mit Semantik eines HTML Dokuments zu tun. CSS3 zu benutzen mag nicht syntaktisch richtig sein (,wegen den Präfixen bsp. ), aber dennoch nicht falsch.
Dann schreibst du noch, dass er das Bild gleich in der richtigen Größe abspeichern soll. Wie denn, wenn das ganze dynamisch sein soll?! Wie das letztlich mit background-size aussieht bezüglich der Qualität, kann ich nicht sagen. Allerdings geht es hier ja um einen Maximalwert, d.h. heißen, dass nur eine Streckung mit x<0 angewand wird, was nicht zu starke Verzerrungen des Bildes bewirken sollte.
CSS3 nicht zu benutzen, weil es noch entwickelt wird, ist schwachsinnig! Wenn man wartet bis der CSS3 Entwurf verabschiedet wurde und alle Browser das auch schön unterstützen, oder sogar jeder Benutzer den neuesten Browser besitzt, braucht man sich auch nicht zu wundern, warum das Web an Qualität und Mehrwert verliert. Wenn man das so sieht, dann gibts kein Konkurrenz-Denken der Browser und wir nutzen alle den IE [rhetorisches Mittel der Übertreibung]. -
Danke für die vielen Antworten,
stellt sich die Frage was ist besser / wichtiger:
.... semantisch korrekt ... oder ... Valide (ohne Warnings) ?
also soll ich es mit CSS3 versuchen?
damit hab ich halt noch NULL Erfahrung, muss ich dabei was beachten?
eigentlich gefällt mir die Lösung mit IMG Tag und 100% auch ganz gut,
das sollte doch auch einen Validen Code ergeben, oder?
wenn man die Anzahl n verschiedener Größen begrenzen kann,
dann das Image in den n benötigten Formaten speichern ist auch ok,
das wäre aber nur sinnvoll für vorher festgelegte Größen und nicht "dynamisch"
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
