Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 25

Thema: Header-Image an Bildschirmgröße automatisch anpassen

  1. #1
    Youngster
    Registriert seit
    24.08.2016
    Beiträge
    17
    Danke
    12
    Bekam 0 mal "Danke" in 0 Postings

    Standard Header-Image an Bildschirmgröße automatisch anpassen

    Hallo Zusammen,


    bin gerade dabei meine eigene Homepage zu erstellen und bin momentan mit dem Header überfordert.

    Ich möchte dass sich das Header Bild automatisch an den Bildschirm anpasst - sei es Laptop oder Smartphone.


    Unter http://test-66838.alfa3044.alfahosting-server.de/ erreicht ihr die Seite und probiert selbst wenn ihr die Seite mit dem Smartphone aufruft dann wird links und rechts das Headerbild abgeschnitten!
    Möchte aber dass das Bild in voller Gänze erscheint!



    In style.css sieht es momentan so aus:


    .site-header {
    background: url(http://test-66838.alfa3044.alfahosti...2XXXXXXXXX.jpg) no-repeat top scroll;
    }

    .site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
    }






    Kann wer helfen?

    Danke!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.236
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Header-Image an Bildschirmgröße automatisch anpassen

    Bist Du weiter gekommen? Bei Smartphone ist das Bild jetzt ganz weg bei mir...

  3. Folgende User finden die Antwort von Arne Drews gut:


  4. #3
    Youngster
    Themenstarter

    Registriert seit
    24.08.2016
    Beiträge
    17
    Danke
    12
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Header-Image an Bildschirmgröße automatisch anpassen

    Zitat Zitat von Arne Drews Beitrag anzeigen
    Bist Du weiter gekommen? Bei Smartphone ist das Bild jetzt ganz weg bei mir...

    Eigentlich sollte das Bild jetzt in voller Größe erscheinen habe folgendes im Stylesheet geändert:

    Code:
    .site-header {
        background: url(http://test-66838.alfa3044.alfahosti...2XXXXXXXXX.jpg) no-repeat top scroll;
        background-size: 100%;
    }
    Zumindest bei mir am iPhone wird das Bild in voller Größe dargestellt - auch am Laptop wird es jetzt groß dargestellt - welches Handymodell hast du? Siehst du das Header Bild garnicht mehr?

    hier nochmal der link

    http://test-66838.alfa3044.alfahosting-server.de/
    Geändert von ChiefIntensiv (25.08.2016 um 11:41 Uhr)

  5. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Header-Image an Bildschirmgröße automatisch anpassen

    Hallo

    Das Bild verschiebt sich nur hinter die Navigation.

    Ich sehe eher das Problem dass das Bild bei Smartphonebreite im Hochformat kaum noch zu erkennen ist. Heißt: Wenn wir eine Lösung anbieten wird sie in der Praxis sinnfrei sein.

    Gruss

    MrMurphy

  6. Folgende User finden die Antwort von MrMurphy gut:


  7. #5
    Youngster
    Themenstarter

    Registriert seit
    24.08.2016
    Beiträge
    17
    Danke
    12
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Header-Image an Bildschirmgröße automatisch anpassen

    Zitat Zitat von MrMurphy Beitrag anzeigen
    Hallo

    Das Bild verschiebt sich nur hinter die Navigation.

    Ich sehe eher das Problem dass das Bild bei Smartphonebreite im Hochformat kaum noch zu erkennen ist. Heißt: Wenn wir eine Lösung anbieten wird sie in der Praxis sinnfrei sein.

    Gruss

    MrMurphy
    Verstehe ich nicht, bei mir funktioniert es am iPhone 4s - Nur ist mir jetzt zu viel Raum zwischen Bild und Navbar - auch am Laptop sieht man den Raum sehr deutlich!!!

    Und dass das Bild oberhalb der Navbar ist soll so sein


    14101962_10155164963718696_1578018966_n.jpg
    Geändert von ChiefIntensiv (24.08.2016 um 23:43 Uhr)

  8. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Header-Image an Bildschirmgröße automatisch anpassen

    Hallo

    Zieh einfach mal das Browserfenster bei einem Desktop-Bildschirm schmaler.

    Gruss

    MrMurphy

  9. Folgende User finden die Antwort von MrMurphy gut:


  10. #7
    Youngster
    Themenstarter

    Registriert seit
    24.08.2016
    Beiträge
    17
    Danke
    12
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Header-Image an Bildschirmgröße automatisch anpassen

    Zitat Zitat von MrMurphy Beitrag anzeigen
    Hallo

    Zieh einfach mal das Browserfenster bei einem Desktop-Bildschirm schmaler.

    Gruss

    MrMurphy
    Ja, wenn ich das tue verändert sich der Abstand zwischen Bild und Navbar - ich möchte aber nicht dass sich hier ein Raum bildet.
    Hast du eine Idee?

    Ich denke es liegt an ".Site Header .Home-Link"
    Geändert von ChiefIntensiv (24.08.2016 um 23:52 Uhr)

  11. #8
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Header-Image an Bildschirmgröße automatisch anpassen

    Hallo

    Du hast das Headerbild als Hintergrundbild eingebunden.

    Hintergrundbilder sind in HTML / CSS jedoch nur als schmückendes Beiwerk gedacht, die von anderen Informationen überlagert werden und die entsprechend selbst keine Informationen enthalten. Deshalb verhalten sie sich auch grundsätzlich anders als Vordergrundbilder.

    Das Verhalten, welches du erreichen willst entspricht dem von Vordergrundbildern. Entsprechend solltest du das Bild auch als Vordergrundbild mit dem img-Element in den Quelltext einbinden. Dann braucht es als CSS-Anweisung im Prinzip nur eine max-width-Anweisung und verhält sich wie von dir gewünscht.

    Als Hintergrundbild läßt sich so ein Verhalten nur mit Tricks und damit Hängen und Würgen erreichen. Immer in dem Wissen, dass es zu Problemen kommen kann.

    Wenn du das Bild trotz der damit verbundenen Nachteile (Erkennbarkeit bei schmalen Fenstern) immer vollständig anzeigen lassen willst solltest du es als Vordergrundbild einbinden.

    In der folgenden Beispielseite erthält das Bild (img-Element) nur wenige CSS-Anweisungen:

    Code:
    display: block;
    max-width: 100%;
    border: 0;
    margin: 0 auto;
    Das Bild verhält sich wie von dir gewünscht und es gibt keine Probleme mit Überlappungen von Containern, da sie sich wie in HTML / CSS vorgesehen gegenseitig anordnen können. Das ganze damit auch vollkommen geräteunabhängig.

    ChiefIntensiv Testseite

    Zusätzlich solltest du zumindest das Logo separat einbinden, damit es auch in schmalen Fenstern gut sichtbar ist.

    Gruss

    MrMurphy
    Geändert von MrMurphy (25.08.2016 um 11:09 Uhr)

  12. Folgende User finden die Antwort von MrMurphy gut:


  13. #9
    Youngster
    Themenstarter

    Registriert seit
    24.08.2016
    Beiträge
    17
    Danke
    12
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Header-Image an Bildschirmgröße automatisch anpassen

    Hallo MrMurphy,

    danke für deine ausführliche Antwort und Erklärung !!

    Im Stylesheet sieht es jetzt folgendermaßen aus:

    Code:
    .site-header {
        background: url(http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg) no-repeat top scroll;
        display: block;
        max-width: 100%;
        border: 0;
        margin: 0 auto;
    }
    
    .site-header .home-link {
        color: #141412;
        display: block;
        margin: 0 auto;
        max-width: 1557px;
        min-height: 230px;
        padding: 0 20px;
        text-decoration: none;
        width: 100%;
    }
    Wenn ich jetzt die Seite mit dem Smartphone öffne sieht es so aus:
    14089418_10155166591603696_857605214_n.jpg

    Das Headerbild wird leider wieder abgeschnitten.


    Wenn ich folgenden Code eingeben:
    Code:
    .site-header {
        background: url(http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg) no-repeat top scroll;
        background-size: 100%;
    }
    
    .site-header .home-link {
        color: #141412;
        display: block;
        margin: 0 auto;
        max-width: 1557px;
        min-height: 230px;
        padding: 0 20px;
        text-decoration: none;
        width: 100%;
    }

    Sieht es am Smartphone so aus:
    14101962_10155164963718696_1578018966_n.jpg

    Hier sieht man dass das Bild nicht mehr abgeschnitten wird, jedoch entsteht ein Raum zwischen Navbar und Bild den ich nicht unbedingt haben möchte.
    Diesen Raum meine ich:

    14101962_10155164963718696_1578018966_ns.jpg



    Die Frage ist jetzt - wie binde ich das Bild ein damit es gleichzeitig nicht abgeschnitten wird und sodass kein Raum entsteht zwischen Navbar und Bild?

  14. #10
    HTML Newbie
    Registriert seit
    25.08.2016
    Ort
    Erfurt
    Alter
    29
    Beiträge
    8
    Danke
    0
    Bekam 3 mal "Danke" in 3 Postings

    Standard AW: Header-Image an Bildschirmgröße automatisch anpassen

    Ich habe mir mal deinen Code angeschaut. Es ist möglich mit CSS dein Problem zu lösen. Jedoch muss man dazu sagen das die strucktur einfach nicht optimal ist. Besser ist es wenn du das Logo der Webseite als <img> einbindest. Und nicht wie derzeit als Background-Image. Den das Background Image übernimmt keine Höhe vom Fließtext, ein ImageElement jedoch schon. Wenn du das Image als Bild einfügst kannst du das Bild mit folgenden Eigenschaften immer mittig positionieren und es Scalliert mit. Und der Content richtet sich nach deinem Logo.

    Code:
    img.irgendEineKlasse{
      display: inline-block;
      min-width: 400px;
      max-width: 1557px;
      width: 100%;
      margin: 0 auto;
    }
    Lg Sassar

  15. Folgende User finden die Antwort von Sassar gut:


Ähnliche Themen

  1. Header Größe anpassen!
    Von Reward im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 21.09.2012, 21:45
  2. Hintergrundgrafik auf Bildschirmgröße anpassen
    Von hangloose im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 01.08.2007, 18:28
  3. Tabelle mit Bildern an Bildschirmgröße im IE anpassen
    Von DieSonja im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 12.02.2007, 16:43
  4. html-Seite der Bildschirmgröße anpassen
    Von cutey im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 02.10.2005, 00:20
  5. Bilder dynamisch an Fenster- bzw. Bildschirmgröße anpassen?
    Von Laser (Gast) im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 03.08.2004, 01:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •