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! :sad:




    In style.css sieht es momentan so aus:



    .site-header {
    background: url(http://test-66838.alfa3044.alf…/08/header-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!

  • 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
    1. .site-header {
    2. background: url([URL]http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg[/URL]) no-repeat top scroll;
    3. background-size: 100%;
    4. }


    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/

  • 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 :)




  • 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"

  • 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
    1. display: block;
    2. max-width: 100%;
    3. border: 0;
    4. 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

  • Hallo MrMurphy,


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


    Im Stylesheet sieht es jetzt folgendermaßen aus:



    Wenn ich jetzt die Seite mit dem Smartphone öffne sieht es so aus:


    Das Headerbild wird leider wieder abgeschnitten.



    Wenn ich folgenden Code eingeben:



    Sieht es am Smartphone so aus:


    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:





    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?

  • 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
    1. img.irgendEineKlasse{
    2. display: inline-block;
    3. min-width: 400px;
    4. max-width: 1557px;
    5. width: 100%;
    6. margin: 0 auto;
    7. }


    Lg Sassar

  • 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
    1. img.irgendEineKlasse{
    2. display: inline-block;
    3. min-width: 400px;
    4. max-width: 1557px;
    5. width: 100%;
    6. margin: 0 auto;
    7. }


    Lg Sassar



    Hallo Sassar,


    Wo im stylesheet.css füge ich den Code ein?


    Bzw. wie gehe ich da genau vor?


    Was genau ist gemeint mit "img.irgendEineKlasse" ? - Beschäftige mich erst 1 woche mit diesen Codes, hab einiges durchschaut aber noch lange nicht alles :)


    Gruß

  • Hey,


    Zitat

    Was genau ist gemeint mit "img.irgendEineKlasse" ?


    Du hast doch deinem Bild eine id oder class zugewiesen. Nimm nun den id/class namen den du dem Bild zugeordnet hast und verwende diesen im css.
    Id-namen kennzeichnest du mit # und class-namen mit .


    Dann sollte es z.b so aussehen:

    Code
    1. img.header{
    2. display: inline-block;
    3. min-width: 400px;
    4. max-width: 1557px;
    5. width: 100%;
    6. margin: 0 auto;
    7. }


    Um dies zu wissen müssen wir erstmal dein code sehen.


    Anstatt header dort deinen id/class namen reinschreiben und alle css befehle die das Bild betreffen ersetzen durch Sassars code.


    Gruß, Stef


  • So ? :




    Da bekomme ich leider nur einen weißen Balken



    Siehe hier:
    http://test-66838.alfa3044.alfahosting-server.de/


    Ich glaube ich habe dem Bild keinen id/class namen zugeordnet, wüsste auch nicht wo ich das finde, vermutlich wird auch deshalb jetzt nichts angezeigt.. bin leider blutiger Anfänger.


    hmm das kann doch nicht so schwer sein.... :(:(:(

  • Hey,


    kein Problem. Jeder fängt mal klein an.

    Code
    1. #img.header-2XXXXXXXXX.jpg {
    2. display: inline-block;
    3. min-width: 400px;
    4. max-width: 1557px;
    5. width: 100%;
    6. margin: 0 auto;
    7. }



    Dies ist so falsch.


    Wenn du dein Background-Image (image über Nav) mittels css eingebunden hast dann mach es raus und binde es in html ein.

    HTML
    1. <img src="deinbild.jpg" alt="Beispieltext">


    Und du kannst diesem Bild einfach ne klasse geben indem du es so machst:

    HTML
    1. <img class="header-pic" src="deinbild.jpg" alt="Beispieltext">


    Nun nimmst du den code von sassar und änderst die klasse in css so:


    Code
    1. img.header-pic {
    2. display: inline-block;
    3. min-width: 400px;
    4. max-width: 1557px;
    5. width: 100%;
    6. margin: 0 auto;
    7. }


    Wozu gehört denn dies hier?


    Code
    1. .site-header .home-link {
    2. color: #141412;
    3. display: block;
    4. margin: 0 auto;
    5. max-width: 1557px;
    6. min-height: 230px;
    7. padding: 0 20px;
    8. text-decoration: none;
    9. width: 100%;
    10. }


    Stef


  • Okay, wie binde ich ein Bild in html ein ?



    Wozu gehört denn dies hier?


    Code
    1. .site-header .home-link {
    2. color: #141412;
    3. display: block;
    4. margin: 0 auto;
    5. max-width: 1557px;
    6. min-height: 230px;
    7. padding: 0 20px;
    8. text-decoration: none;
    9. width: 100%;
    10. }


    Der gehört zum header, der ist glaub ich dafür da dass wenn man draufklickt man wieder zur Startseite kommt!
    Ich verwende das Twenty-Thirteen Theme für Wordpress, wenn das hilft.


  • Wozu gehört denn dies hier?


    Code
    1. .site-header .home-link {
    2. color: #141412;
    3. display: block;
    4. margin: 0 auto;
    5. max-width: 1557px;
    6. min-height: 230px;
    7. padding: 0 20px;
    8. text-decoration: none;
    9. width: 100%;
    10. }


    Stef


    Da Bilder manchmal mehr erklären als 1000 Worte :)



    [http://tommy-bley.de/web-hilfe/css_klassen.png -> Link für besser Qualität]


    Das nächste ist, wenn du deine CSS Classe so nennst wie von dir oben beschrieben:


    #img.header-2XXXXXXXXX.jpg {
    display: inline-block;
    min-width: 400px;
    max-width: 1557px;
    width: 100%;
    margin: 0 auto;
    }


    würde das im HTML Code so aussehen müssen damit diese eigenschaft greift:


    <img id="img" class="header-2XXXXXXXXX jpg" src="[pfad zur datei]" />


    Wie du siehst wäre das relativer Blödsins :) wenn du im CSS ein String mit einer Route (#) markierst bedeutet das, dass du eine ID im HTML ansprichst. Achte hier darauf, wenn du valides HTML schreiben willst, dass du in auf einer HTML Seite immer nur eine ID drauf hast.
    Da eine ID ja was eindeutiges sein soll. CSS würde dennoch bei mehreren ID's alles richtig darstellen. Erst wenn du JavaScript schreibst würde dir das dann auf die Füße fallen.


    Wenn du Strings im CSS mit einen Punkt notierst (.), sprichst du eine HTML Klasse an. Hier können auch durchaus mehrere pro Element und auch mehrfach wiederverwnedet werden. Deswegen sollte man sich für Cleancode eher auf Klassen konzentrieren und nur für eindeutige Sachen IDs verwenden.


    Wenn du im CSS einen String schreibst ohne irgendwas, wie z.B. div, dann sprichst du direkt den HTML Tag an. In diesem Fall wäre es der Div-Container.


    Nun kann man im CSS auch klassen kombinieren bzw Breadcrumbs (Krümmelpfade) ertellen. Damit schaffst du dir eine Ebene, die gewisse HTML-Bedingungen, an gewisse DOM Sturckuren anhängst.


    zum beispiel hast du in deinem HTML mehrere Image Tags, <img /> jetzt hast du eventuell ein zwei Spalten Layout und möchtest auf der rechten Seite das die Bilder immer 200px Breit sind und auf der Linken Seite immer 150px Breit sind.


    jetzt könntest du das wie folgt lösen


    Code
    1. .leftSide img {
    2. width: 200px;
    3. }
    4. .rightSide img {
    5. width: 150px;
    6. }


    in dem ich die Zwei spalten jeweils mit einer Klasse leftSide und rightSide versehen habe. Kann ich nun wunderbar sagen das alle Bilder welche im Container mit der Elternklasse .leftSide sind auch wirklich 200px breit sind dabei ist es egal ob die bilder in weiteren Container steckt, weil ich ja sage beliebig viele Container zwischen .leftSide ..... img sein dürfen. Möchte ich hingegen sagen. Das nur Bilder die direkt in leftSide liegen 200px Breit sein sollen das muss das so aussehen:


    Code
    1. .leftSide > img {
    2. width: 200px;
    3. }


    mit dem Größerkleiner Zeichen, (>) kann ich nun im CSS sagen das ich nur direkte Kinder ansprechen möchte.


    Es gibt natürlich noch ca 50.000 andere CSS REgelen aber für den CSS Einstieg sollte das was bringen :)


    Ich hoffe ich konnte etwas licht ins dunkel bringen


    Lg Sassar


    - - - Aktualisiert - - -


    Und sry für meine schlechte Ausdrucksweise xD

    2 Mal editiert, zuletzt von Sassar () aus folgendem Grund: Bild vergessen

  • Hallo Sassar,



    Danke für deine Erklärungen ! Das ist eine Sprache für sich,.. die ich vermutlich nie sprechen werde... Eigentlich wollte ich ein einziges Problem lösen, entpuppt sich doch schwieriger als gedacht.


    Hast du trotzdem noch eine ausführliche Schritt-für-Schritt Anleitung wie ich diesen Raum loswerde, sodass wenn ich die Seite über mein Smartphone oder Laptop aufrufe, das Bild an die Navbar anknüpft?


    Siehe:


    http://img5.fotos-hochladen.net/uploads/39edo4q2vwl.jpg




    Gruß

  • ich kann dir eine Schritt für Schritt anleitung geben :) aber dafür solltest du das HTML umbauen da sonst der CSS Code einfach den Rahmen sprengt. Wenn du das Bild also mittels des HTML Tags <img /> einbindest kannst du, wie von mir weiter oben schon geschriebenen code, einfach anwenden. Dieser Funktioniert aber nur bei einen Image Element nicht bei einen Background Image :)


    Lg Sassar

  • ich kann dir eine Schritt für Schritt anleitung geben :) aber dafür solltest du das HTML umbauen da sonst der CSS Code einfach den Rahmen sprengt. Wenn du das Bild also mittels des HTML Tags <img /> einbindest kannst du, wie von mir weiter oben schon geschriebenen code, einfach anwenden. Dieser Funktioniert aber nur bei einen Image Element nicht bei einen Background Image :)


    Lg Sassar



    Okay, verstehe und wie binde ich mittels HTML Tags das Bild ein? Brauche ich dafür ein Programm?

  • Nein brauchst du nicht.


    Es geht mit dem img-tag. So sieht es dann aus in HTML ohne id oder class hinzuzufügen:


    HTML
    1. <img src="hierdeinbild" alt="Beispieltext" >


    Wenn man nun noch eine class hinzufügen möchte fügt man einfach class="deinclassname" hinzu:


    HTML
    1. <img class="deinclassname" src="hierdeinbild" alt="Beispieltext" >


    Und wenn du nun diesen class name (deinclassname) in css aufrufen willst geht es mit dem . Selektor :


    Deine HTML Datei :


    HTML
    1. <img class="deinclassname" src="hierdeinbild" alt="Beispieltext" >


    Und css dazu:


    Code
    1. .deinclassname {
    2. }


    mit .deinclassname sprichst du dann die class im img tag an und kannst somit schon loslegen mit css.


    Stef