Hintergrundbild - Größe einstellen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ankommen
besucher
bild
code
dokument
eigenschaft
entstehen
funktionieren
hintergrund
hintergrundbild
http
letzten pixel
position
positionieren
problem
quellcode
standard
text
url
vorschlag
-
Hi
Ich erstelle in meinem php-script ein div mit einem Hintergrundbild
echo "<div style=\"backgroundimage...\"></div>";
So ich weiss ja dass man die Position der oberen rechten Ecke eines Hintergrundbildes positionieren kann, wie kann ich aber die Höhe und Breite eines Hintergrundbildes einstellen?
Hoffe ihr könnt mir helfen!!! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
echo "<div style=\"background:url(background1.gif); background-size: 80%\">Text</div>";
-
rms schrieb:
echo "<div style=\"background:url(background1.gif); background-size: 80%\">Text</div>";
ob das auf allen gängigen Browsern geht? Ich wage mal, es zu bezweifeln ...
afaik ist da derzeit nur Trickserei möglich.
Beispielsweise könnte man das ganze wie folgt anlegen:
<img src="blub.jpg" style="position:absolute;z-index:-1;width:X;height:Y"> <div>INHALT</div>
Damit erzeugst du deinen Hintergrund als gewöhnliches Bild und kannst ihn somit per CSS strecken/stauchen. mit z-index:-1 und position:absolutebewirkst du, dass das Bild dann optisch hinter alle anderen Elemente deines HTML-Dokuments geschoben wird.
Das ganze ist zwar auch wieder kein Idealbeispiel für 'schönes' programmieren, aber immerhin eine mögliche Lösung -
Ansonsten gibt es auch noch tolle Php-Funktionen wie z.b. getimagesize()
(http://php.net/manual/de/function.getimagesize.php)
Die sind ja nicht umsonst da ;)
Gruß,
dex (qap2-Team) -
Also mein Vorschlag sollte bei allen neuen Browsern funktionieren ist nämlich total CSS3 valid und in wie fern das der IE umsetzt oder nicht ist ein Problem von Microsoft.
http://www.w3.org/TR/2002/WD-css3-background-20020802/
Das ordentlichste wäre allerdings, du machst das Bild einfach nur so groß, wie du es benötigst und kannst dann einfach in dein Quellcode schreiben:
echo "<div style=\"background:url(background1.gif)\">Text</div>";
Dass ist CSS1 Standard und wird von allen gängigen Browsern unterstützt vgl. http://de.selfhtml.org/css/eigenschaften/hintergrund.htm
Außerdem würde nicht mehr Traffic entstehen als nötig, weil dein Bild die kleinste Größe hätte und nicht gestaucht würde.
Beitrag zuletzt geändert: 2.12.2009 17:50:53 von rms -
rms schrieb:
Also mein Vorschlag sollte bei allen neuen Browsern funktionieren ist nämlich total CSS3 valid und in wie fern das der IE umsetzt oder nicht ist ein Problem von Microsoft.
http://www.w3.org/TR/2002/WD-css3-background-20020802/
Ja, das stimmt schon, aber ich denke 99% der Besucher einer Internetseite wird es darauf ankommen, dass es auch mit ihrem Browser funktioniert, nicht aber, welche Technik dahintersteckt, wer was falsch gemacht hat (Programmierer oder MS) - und da atm noch wimni ~60% mit dem IE unterwegs sind, wäre es natürlich ein bisschen ärgerlich, wenn man eine ansonsten gut funktionierende Seite programmiert und sie trotzdem bei mehr als jedem zweiten Besucher halb zerschossen ankommt!
Dass einem der IE bei sowas oft nen Strich durch die Rechnung macht, sollte ja hinlänglich bekannt sein - ich bin ja schon froh, dass die IE >=7 mittlerweise zumindest ETWAS standardkonformer darstellen ;)
Das ordentlichste wäre allerdings, du machst das Bild einfach nur so groß, wie du es benötigst und kannst dann einfach in dein Quellcode schreiben:
echo "<div style=\"background:url(background1.gif)\">Text</div>";
Dass ist CSS1 Standard und wird von allen gängigen Browsern unterstützt vgl. http://de.selfhtml.org/css/eigenschaften/hintergrund.htm
Außerdem würde nicht mehr Traffic entstehen als nötig, weil dein Bild die kleinste Größe hätte und nicht gestaucht würde.
Ist natürlich aber auch wieder eine Frage der Anwendung: wenn er jetzt 'nen Hintergrund für ein div/eine Seite mit dynamischer Breite & Höhe haben will, dann müsste er ja quasi für jede gängige Monitorauflösung (was im Moment beim Umstieg von 4:3, 16:9 und 16:10 ja einige sind) ein passendes BG-Bild machen und evtl. per JS das passende einbinden - in meinen Augen eine sehr bedenkliche Lösung ;)
Gruß, -
Du hast natürlich vollkommen recht, es geht schon darum, dass meine Besucher alles richtig sehen.
Meine Möglichkeit mit der festen Bilder Größe geht natürlich NUR bei einem statischen div. Aber vielleicht wird ja ein solche genutzt... -
Ok Vielen Dank! Ich probiers gleich mal aus. Allerdings frag ich genau daher, weil mein div zwar statisch ist (also keine prozentangaben) aber ich keine Lust hab mein Bild tausendmal neu zu machen und hochzuladen, ums dann bis auf den letzten Pixel in der richtigen Größe zu haben ist mir das dann schon etwas zu umständlich gewesen!
Also vielen Dank und ich hoff jetzt mal dass's klappt! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
