Header mit vollem Screen (Bild) hinter bestehende Navigation legen

  • Ich habe hier 1900x800 großes Bild mit schwarzen Hintergrund welches ich Bildschirmfüllend hinter die Navigation legen würde.

    In meinem Code liegt die Navigation ja schon im Header

    Jetzt bin ich mir nicht sicher ob das eine gute Idee war

    ich habe mal etwas probiert

    Code
    .header {
        background-image: url("img/header.png");
        background-size: auto;
        display: flex;
        align-items: center;
    }

    dann habe ich dem Header die class .header geben. nix passier

    Dann habe ich den Header unter das <nav> gesetzt . nix passier

    Dann habe ich den Header in ein div gesetzt. das halbiert mir die navigation aber ohne Bild.

    Ich hoffe das Problem gut genug beschrieben zu haben.


    was wäre die richtige vorgehensweise?

  • Deine Vorgehensweise ist richtig, aber deine nav hat einen schwarzen Hintergrund und überdeckt das Hintergrundbild des header. Wenn Du das löschst wird sofort das Hintergrundbild sichtbar, jedenfalls wenn ich es im Seiteninspektor hinzu füge:

    Code
    header {
        background-image: url(img/header.png);
        background-size: auto;
        display: flex;
        align-items: center;
        background-size: contain;
    }

    Also keine Klasse nötig, ich musste aber background-size: contain; nehmen, damit das Bild sichtbar wird, denn das meiste dieses Bildes ist ja schwarz

  • Sofern das Bild auch auf die volle Seitenbreite gedehnt werden darf, wäre auch folgendes möglich:

    CSS
    background: url(/img/header.png) no-repeat center;
    background-size: cover;
  • Auch da passiert garnix

    Stand lokal

    Code
    .header{
    background: url(/img/header.png) no-repeat center;
    background-size: cover;
    }

    Aber auch hier passiert absolut nix

  • Deine Vorgehensweise ist richtig, aber deine nav hat einen schwarzen Hintergrund und überdeckt das Hintergrundbild des header. Wenn Du das löschst wird sofort das Hintergrundbild sichtbar, jedenfalls wenn ich es im Seiteninspektor hinzu füge:

    Code
    header {
        background-image: url(img/header.png);
        background-size: auto;
        display: flex;
        align-items: center;
        background-size: contain;
    }

    Also keine Klasse nötig, ich musste aber background-size: contain; nehmen, damit das Bild sichtbar wird, denn das meiste dieses Bildes ist ja schwarz

    das seh ich auch gleich an

  • Ich geh noch mal mein Html durch

    @Netuser mit deinem css ändert sich nichts

    @Sempervivium dein css rückt meine navigation nach links und wenn ich die Hintergrundfarbe von nav wegnehme ist die natürlich weg

    zb so hab ich mir das gedacht ohne den schnickschnack

    exaple.png

  • @Netuser mit deinem css ändert sich nichts

    Wird kein Bild angezeigt oder was meinst du damit? In der Entwicklerkonsole, wenn du mit dem Mauszeiger über das "background: url..." fährst, erhälst du dann die Info, das die Grafik nicht geladen werden konnte?


    zb so hab ich mir das gedacht ohne den schnickschnack

    Also meinst du ein Flächenfüllendes Hintergrundbild?


    @Sempervivium dein css rückt meine navigation nach links...

    Ja, dein header-Tag hat im CSS ja kein "display:flex".

    Wenn du es jetzt mit dem Code von Sempervivum einfügst, müsstest du dann noch der nav "width:100%" geben.

  • Ich versuch das nochmal genau zu beschreiben.

    Wenn ich die Index.html aufrufen soll ein lustige Bild von mir Flächenfüllend erscheinen auf dem Bild ober nicht über dem Bild oben soll die navigation sein.

    Ich habe dazu ein Youtube tutorial gefunden. Will die Sache aber selbst mit euch hier lösen

    Ich hoffe ihr versteht was ich meine

  • so soll es sein. ich habe dafür Stunden investiert schwamm drüber.

    Doch wenn als nächstes darunter einen content anlegen will sollte ich das doch am besten mit <sections> machen oder?

    Aber erst muss das bei der mobil ansicht in die mitte rücken.

    Meine Idee wäre das Bild (bzw das sichtare) mittel Gimp auf kleinste Breite zuschneiden und dann den Body schwarz hinterlegen und das in den Header einzufügen.

    Doch dazu müsste der Header aus dem Body raus. Oder

    Achso es läuf auf einen Onepager raus

  • Doch wenn als nächstes darunter einen content anlegen will sollte ich das doch am besten mit <sections> machen oder?

    Den eigentlichen Content-Bereich würde ich in den main-Tag setzen.

    Für die weitere Gliederung dann entsprechend mit article, section, aside, header, footer ect... arbeiten.


    Aber erst muss das bei der mobil ansicht in die mitte rücken.

    Du könntest z.B. noch folgendes setzen:

    CSS
    background-position: right;

    So würde man zumindest auf bei der mobilen Ansicht das eigentliche Bild und nicht nur die schwarze Fläche sehen.

    Wäre aber auch nicht optimal.


    Meine Idee wäre das Bild (bzw das sichtare) mittel Gimp auf kleinste Breite zuschneiden...

    Das wäre deutlich besser.


    ... und dann den Body schwarz hinterlegen und das in den Header einzufügen.

    Doch dazu müsste der Haeder aus dem Body raus. Oder

    Warum jetzt wieder in den header? Ich dachte, du willst das Bild flächenfüllend haben?

    Und header aus dem body raus geht nicht. Der header-Tag ist != der head-Tag.

  • Ich glaub wir haben ein verständigungs problem.

    Du meinst sicherlich beim OnePager, dass das Bild nur im ersten "Part" füllend ist. Wenn man dann weiter runter scrollt, kommt dann der nächste Part, ohne das Bild. Das meinst du wohl mit "header".

    Dann gehört das Bild aber weder in den body, noch in der header, sondern als Hintergrundbild in den ersten Part.

  • Du meinst sicherlich beim OnePager, dass das Bild nur im ersten "Part" füllend ist. Wenn man dann weiter runter scrollt, kommt dann der nächste Part, ohne das Bild. Das meinst du wohl mit "header".

    Dann gehört das Bild aber weder in den body, noch in der header, sondern als Hintergrundbild in den ersten Part.

    ich glaube es genau so zu meinen. Hast du dazu eine Idee?

    Wobei ich immer Dachte Nav oder Header wäre der erste Part?

  • Wobei ich immer Dachte Nav oder Header wäre der erste Part?

    nav ist eher für die Navigation / das Menü einer Seite. Der header-Tag ist für Header-Bereiche, z.B. wenn man in einem "article" oder "section" neben einer Überschrift noch andere Elemente als "Kopf" zusammenfassen möchte.

    Die Tags header & footer sind selbstbezeichnend und können auch mehrfach in einer Seite, z.B. jeweils in entsprechenden Abschnitten auftauchen.


    Ich würde es ganz simpel mit "main >section > ..." machen, wobei die section jeweils ein Abschnitt darstellt.


    Edit:

    Wobei du es durchaus auch mit dem header machen kannst, wenn dein erster Part wie in deinem Beispiel-Screenshot nur aus wenigen, einleitenden Elementen wie einer Überschrift & einem Button besteht.


    Ein simpler Aufbau wäre z.B.:


    Je nachdem, wie groß & "eigenständig" deine Parts sind, wäre hier durchaus auch der article-Tag anstatt section angebracht...

  • Dann hatte ich da wohl eine falsche Vorstellung ist noch von html4

    Code
    <head></head>
    <body>
        <div id="header">meist eine grafik</header>
            <div id="nav"></nav>
                <div id="content"></conten>
                    <div id="footer"><footer<
    </body<

    Davon muss ich mich wohl verabschieden.

    Eigentlich wusste ich das schon deshalb habe ich angefangen mittel Bootstrap snippets und copy & paste was zusammen zu basteln.

    Merke aber gerade jetzt, dass ich vieles lesen kann aber nicht unbedingt die Hirachie versteh.

    Da komm ich mir ziemlich blöd vor.

    Was ich vorhabe

    start mit bildschirmfüllende Grafik (welches vielleicht auch durch ein Slider (Carousel) umgebaut werden kann).

    Die Navigation soll oben angesiedelt sein und z-index mäßig überdem Bild fixiert sein.

    Wenn mann runterscrollt kommt etwas info und blabla.

    darauf folgen einige Galerien

    Dann Impressum Datenschutz und letztendlich footer mit einigen Infos.

    Das soll die Hierachie sein.


    Wie das bei html4 aussah habe ich ja mal kurz als Sources gezeigt

    Wie würde das bei meinem Vorhaben mit Html5 aussehen?

    Ein schema würde reichen.



    Jetzt hab ich mich schon wieder vergaloppiert

    Step by Step

    Erst das Nav/Header (oder wie man es nennt) zum Erfolg bringen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!