kostenloser Webspace werbefrei: lima-city


Header Grafik die sich anpasst

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    michl27

    michl27 hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. michl27 schrieb:
    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
    yo mey! beispielcode von w3schools.com ;)
  4. 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


  5. 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...
  6. 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...
  7. 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? :biggrin:

    (Bin michl27, ist mein anderer Account) ;)
  8. 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.
  9. Autor dieses Themas

    michl27

    michl27 hat kostenlosen Webspace.

    Mein Bild liegt im jpg Format vor und hat lediglich 170kb
  10. michl89 schrieb:
    ... Saublöde Frage: Wie gebe ich in css in Bildpfad an? ...
    relativ zu der css datei.
  11. m******e

    michl89 schrieb:
    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.
    [...]
    Saublöde Frage: Wie gebe ich in css in Bildpfad an?
    Saublöde Frage: Könntest Du auch auf die gestellte Frage antworten? Wäre ja mal nett.

    Ü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:
    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
    Auch mein Gedanke.

    czibere schrieb:
    michl89 schrieb:
    ... Saublöde Frage: Wie gebe ich in css in Bildpfad an? ...
    relativ zu der css datei.
    :-D ^^

    background-image:url(SinnlosGroßesBild.jpg);
    selfhtml !
  12. Autor dieses Themas

    michl27

    michl27 hat kostenlosen Webspace.

    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
  13. burgi

    Co-Admin Kostenloser Webspace von burgi

    burgi hat kostenlosen Webspace.

    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!
  14. daswing

    Moderator Kostenloser Webspace von daswing

    daswing hat kostenlosen Webspace.

    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
  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!