Header Grafik die sich anpasst
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antworten
anzeigen
bandbreite
beispiel
bild
code
frage
grafik
header
http
jemand
kleineres bild
nehmen
nutzen
riesiges bild
sekunde
spielplatz
url
wachsen
wichtige frage
-
Vorab: ich hab Google benutzt, jedoch beziehen sich die Antworten auf cms wie Wordpress, Wbb etc.
Ich habe ein Bild dass 1000x800 Pixel gross ist. Dieses möchte ich in dieser Auflösung auf meine Homepage einbinden.
Es ist doch mit css möglich, dass sich das Bild der Auflösung entsprechend anpasst.
Hätte jemand einen Beispiel Code? Danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
michl27 schrieb:
yo mey! beispielcode von w3schools.com ;)
Vorab: ich hab Google benutzt, jedoch beziehen sich die Antworten auf cms wie Wordpress, Wbb etc.
Ich habe ein Bild dass 1000x800 Pixel gross ist. Dieses möchte ich in dieser Auflösung auf meine Homepage einbinden.
Es ist doch mit css möglich, dass sich das Bild der Auflösung entsprechend anpasst.
Hätte jemand einen Beispiel Code? Danke -
Eine wichtige Frage dazu ist ob Du möchtest das sich nur die Breite anpasst.
Oder ob die Bildhöhe proportional mit wachsen soll.
html
<img class="bild" src="http://www.lima-city.de/images/layout/icons/house.png" />
css
img.bild { width: 100%; /* Das ist die wichtige Zeile */ height: auto; position: absolute; /* Die Positionierung */ top: 0; left: 0; }
Beispiel:
http://simuliertes.lima-city.de/spielplatz/papierkorb/100prozent.html
siehe dazu:
http://tutsandtipps.the-netbrain.de/tutorials/vollflaechige-hintergrundbilder-nur-mit-css
-
Ich bin mir nicht sicher, ob es nötig bzw. sinnvoll ist, ein so riesiges Bild als Header zu nutzen. Dadurch lädt die Seite entsprechend länger! Du kannst genauso ein kleineres Bild nehmen und es größer anzeigen...
-
tobiworlds schrieb:
Ich bin mir nicht sicher, ob es nötig bzw. sinnvoll ist, ein so riesiges Bild als Header zu nutzen. Dadurch lädt die Seite entsprechend länger! Du kannst genauso ein kleineres Bild nehmen und es größer anzeigen...
das ist auch nicht die Lösung, sinnvoller wäre es, nach passender Bildschirmgröße die passend große Grafik zu laden! (übrigens machen bei der größe als PNG gespeichert die untershciede gerade mal 200kb aus... idR ist das keine sekunde zusätzliche Ladezeit... -
simuliertes schrieb:
Eine wichtige Frage dazu ist ob Du möchtest das sich nur die Breite anpasst.
Oder ob die Bildhöhe proportional mit wachsen soll.
html
<img class="bild" src="http://www.lima-city.de/images/layout/icons/house.png" />
css
img.bild { width: 100%; /* Das ist die wichtige Zeile */ height: auto; position: absolute; /* Die Positionierung */ top: 0; left: 0; }
Beispiel:
http://simuliertes.lima-city.de/spielplatz/papierkorb/100prozent.html
siehe dazu:
http://tutsandtipps.the-netbrain.de/tutorials/vollflaechige-hintergrundbilder-nur-mit-css
Saublöde Frage: Wie gebe ich in css in Bildpfad an?
img.bild { und nu?
(Bin michl27, ist mein anderer Account) ;) -
sebulon schrieb:
tobiworlds schrieb:
Ich bin mir nicht sicher, ob es nötig bzw. sinnvoll ist, ein so riesiges Bild als Header zu nutzen. Dadurch lädt die Seite entsprechend länger! Du kannst genauso ein kleineres Bild nehmen und es größer anzeigen...
das ist auch nicht die Lösung, sinnvoller wäre es, nach passender Bildschirmgröße die passend große Grafik zu laden! (übrigens machen bei der größe als PNG gespeichert die untershciede gerade mal 200kb aus... idR ist das keine sekunde zusätzliche Ladezeit...
Gerade einmal 200 KB...
Für einen User mit begrenzter Bandbreite wie bspw. EDGE sind 200KB nicht in einer Sekunde geladen sondern mit etwas Glück in 30 Sekunden, das ist ein bedeutender Unterschied.
Das Internet dient der Datenfernübertragung und nicht dazu sinnloser Weise Grafiken mit 1000x800 Pixeln um die Welt zu schicken. zumal die Grafik den Informationsgehalt der Website vermutlich kaum oder gar nicht unterstützt.
Solche großen Grafiken sind nur eines: lästig.
Beim Umgang mit Bandbreite sollte man immer bedenken das Datenübertragungskanäle kein Spielplatz und erst recht nicht euer Eigentum sind, Bandbreite gehört allen, also verschwendet Sie nicht leichtfertig.
im Netz gilt: so groß wie nötig und so klein wie möglich, haltet euch daran. -
Mein Bild liegt im jpg Format vor und hat lediglich 170kb
-
michl89 schrieb:
relativ zu der css datei.
... Saublöde Frage: Wie gebe ich in css in Bildpfad an? ... -
michl89 schrieb:
Saublöde Frage: Könntest Du auch auf die gestellte Frage antworten? Wäre ja mal nett.
simuliertes schrieb:
Saublöde Frage: Wie gebe ich in css in Bildpfad an?
Eine wichtige Frage dazu ist ob Du möchtest das sich nur die Breite anpasst.
Oder ob die Bildhöhe proportional mit wachsen soll.
[...]
Übrigens:
Eine Webseite mit einer 800px hohen Header-Grafik würde mich nicht wieder sehen.
Man denke dabei an Netbooks, Smartphones usw.
So ein Schwachfug wird ja nur noch von einer Seite mit einem über 8MB! großen GIF übertroffen, welches dann wesentlich kleiner skaliert wird.
8.220,75 KB (8.418.044 Byte) 4.928px × 3.264px (Skaliert zu 1.040px × 700px)
fatfox schrieb:
Auch mein Gedanke.
Solche großen Grafiken sind nur eines: lästig.
Beim Umgang mit Bandbreite sollte man immer bedenken das Datenübertragungskanäle kein Spielplatz und erst recht nicht euer Eigentum sind, Bandbreite gehört allen, also verschwendet Sie nicht leichtfertig.
im Netz gilt: so groß wie nötig und so klein wie möglich
czibere schrieb:
michl89 schrieb:
relativ zu der css datei.
... Saublöde Frage: Wie gebe ich in css in Bildpfad an? ... ^^
background-image:url(SinnlosGroßesBild.jpg);
selfhtml ! -
Was soll ich denn antworten wenn ichs nicht weiss?? Ich hab doch geschrieben, dass michl27 und michl89 die ein und die selbe person ist.
Ihr wundert euch dass hier so wenig los ist, erstellt dazu Threads das man den Server im Monat für nen Tag abschalten soll ..
Ganz ehrlich, wenn man so blöd angemault wird, wunderts mich nicht das hier kaum was los ist
Ich werde meine Fragen dann in Zukunft in einem anderem Forum stellen, war auch ne SAUBLÖDE Idee von mir hier nachzufragen - entschuldigung recht herzlich
Beitrag zuletzt geändert: 20.12.2012 16:10:36 von michl27 -
michl27 schrieb:
Was soll ich denn antworten wenn ichs nicht weiss?? Ich hab doch geschrieben, dass michl27 und michl89 die ein und die selbe person ist.
Ihr wundert euch dass hier so wenig los ist, erstellt dazu Threads das man den Server im Monat für nen Tag abschalten soll ..
Ganz ehrlich, wenn man so blöd angemault wird, wunderts mich nicht das hier kaum was los ist
Ich werde meine Fragen dann in Zukunft in einem anderem Forum stellen, war auch ne SAUBLÖDE Idee von mir hier nachzufragen - entschuldigung recht herzlich
Es wundert mich aber auch nicht, wenn man selbst Seiten gestalten will, man nicht dazu im Stande dazu ist, eine Suchmaschine zu bedienen (die Frage mit dem Pfad in der CSS), und solche Fragen nicht mal ansatzweise selbst beantworten kann, dann noch mit 2 Accounts auftritt, man vielleicht nicht immer Antworten in der Art bekommt, wie man sie sich wünscht ...
Ich habe beobachtet, dass wenn jemand eine Frage stellt, und selbst Initative zeigt, noch immer sinnvoll gehoflen wurde (klar: Ausnahmen bestätigen die Regel ...). Aber das nur am Rande.
Also: back to topic bitte! -
burgi schrieb:
Also: back to topic bitte!
Beachten sonst wird dieser Thread geschlossen, wer helfen möchte hilft! Wer nicht lässt es bleiben!
MfG Stephan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
