[HTML] Header Hintergrund volle Breite

Dieses Thema im Forum "Webdesign" wurde erstellt von _zippo^, 17. September 2011 .

  1. 17. September 2011
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Header Hintergrund volle Breite

    hey boys,
    Download: Unbenannt-1.jpg | www.xup.in

    angenommen ich hab einen header der aussieht wie dieser - wie würdet ihr realisieren, den header entsprechend der auflösung des users auf width:100% zu kriegen,
    am liebsten bis zu einer auflösung von full hd, also 1920px breit;

    erstelle ich die grafik jetzt in dieser breite und binde sie mit width: 100% ein und ein user mit nur 1280px (breiter) auflösung ruft die seite auf, so sieht das ja mega aus, da das bild ja nicht gescheit skaliert wird, vor allem wegen der benötigten höhe auf 1920 breite...

    also nochmal verständlicher - ich möchte meinem header width:100%; und height:150px; geben - wie bekomme ich es hin dass eine 1920*600px große grafik innerhalb dieses header immer richtig skaliert wird...

    jemand ne idee? danke schonmal
     
  2. 17. September 2011
    AW: Header Hintergrund volle Breite

    css3: background-size:100%;

    wenn du alte browser auch unterstützen willst, musst du das bild als IMG einbinden, entsprechend skalieren und alle anderen elemente per z-index/position:absolute drüber legen.
     
  3. 17. September 2011
    AW: Header Hintergrund volle Breite

    hui, laut browsersupport scheiterts mal wieder nur am internetexplorer

    mit javascript oder so kennst du auch nix?
     
  4. 18. September 2011
    AW: Header Hintergrund volle Breite

    Was ist das Problem daran, zippo?

    Zum Thema JavaScript: [G]javascript screen resolution[/G]
     
  5. 18. September 2011
    AW: Header Hintergrund volle Breite

    wo genau ist der unterschied wenn ich es als background image einbinde oder als normales ?
    stehe gerade auf dem schlauch was ich da jetzt anders skalieren können soll...
     
  6. 18. September 2011
    AW: Header Hintergrund volle Breite

    Die Seite wird im Chrome damit unbenutzbar, denn dort lagt die Seite dann wie Hölle... Müsste man quasi ne Browserweiche einbauen und Chrome ne andere Einstellung verpassen.

    EDIT:// glaub das Problem bestand in dem fixieren des backgrounds, nevermind, glubsch bei Murdoc rein, der hats richtig =D

    Du kannst aber auch entsprechend der Auflösung reagieren und verschiedene Bilder einbinden, jenachdem welche Auflösung der Browser ha Media Queries Hoffe das hilft dir weiter.

    Merkt er das auch per JS im laufenden Betrieb? Bestimmt oder? Mein nur, dann würd ich mir da auch mal was überlegen, benutze grad auschließlich media queries für die Darstellung auf anderen Plattformen/Auflösungen.
     
  7. 18. September 2011
    Zuletzt bearbeitet: 10. Oktober 2013
    AW: Header Hintergrund volle Breite

    so wirds gemacht:
    BG Scale
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.