Header-Bild breiter als Seite

    Ich traue mich kaum noch zu fragen, dennoch habe ich ein Problem, das ich seit Stunden nicht löse kann. Daher doch noch eine Frage...

    Meine Seite hat eine Breite von 1080px, das aktuelle Header-Bild hat eine Größe von 1080px x 176px (max. 200px Höhe derzeit möglich), erstreckt sich also über die volle Seitenbreite. Ist es irgendwie machbar, ein Header-Bild einzufügen, dass breiter als die Seite und höher als 200px ist? (also z.B. ein Header-Bild von 1200px x 240px)

    Die Seite: http://www.veda-vit.de

    Grüße,
    Pradhana

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Oder noch besser: einfach einen weißen Hintergrund unter das Header-Bild legen. Der Hintergrund sollte sich über die ganze Bildschirmbreite erstrecken und etwas höher als das Header-Bild sein. Ist so etwas technisch umsetzbar?

    In wenigen Stunden hast du das Basiswissen von CSS erlernt, dann hast du deine Zeit nicht gut eingesetzt . :-)
    Datürlich ist das möglich. Du machst das aktulle Bild aus dem aktuellen Container und machst dafür ein head bzw. div tag mit der maximalen Breite die du haben willst. Dann machst du das Bild mit 100% breite rein und fertig. Sowas ist absulute Basis von allem, tut mir leid wenn ich es so sagen muss.

    http://lmgtfy.com/?q=css+grundkurs+youtube

    Die Theorie habe ich dir erklärt, ich hoffe das wird dir trotz der kritik etwas helfen weiter zu kommen. Wenn nicht, schreibst du eben nochmal dann helfe ich weiter.

    Danke für Deine Antwort.

    Ich bekomme das nicht ganz so hin, wie Du es mir beschrieben hast, habe jetzt aber mal folgenden Code in die die style.css eingetragen:

    #masthead .header-image {
    display: block;
    width: inherit;
    max-width: 1920;
    width: 100%;
    margin: 0 auto;
    background-size: cover;
    background-position: 50% 50%;
    }

    Damit wird das Header Bild zwar auf volle Breite gezogen, allerdings wird das Bild nur in der cropped-Version eingebunden, was ich natürlich nicht möchte...

    Wenn du schon dabei bist würde ich den Text nicht auf dem Bild speichern, sondern mit CSS positionieren. ist einfach schöner.
    Die passende Schrift kannst du ja als Webkit hochladen oder einen Link von GoogleFonts benutzen.

    Für kleinere Geräte die Schrift entweder mit media querys kleiner machen - oder benutze fittext.js. dafür. Es sollten wohl 5-6 breakpoints reichen und es muss ja nicht px genau sein. daher immer besser ohne js.
    die Angfabe rev ist noch nicht verbreitet und sicher genug für responsive schrift.

    Versuch mal so:


    .banner-top {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    }
    .banner-top img {
    display: block;
    margin: 0 auto;
    width: 100%;
    }
    .banner-top span {
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: 100%;
    font-size: 9em;
    color: #fff;
    }

    <div class="banner-top">
    <img src="http://www.veda-vit.de/wp-content/upl…9/HeaderSW1.png" alt="" />
    <span>Veda Vit</span>
    </div>

    Einmal editiert, zuletzt von rantanplan2000 (15. September 2016 um 22:00)

    Vielen. vielen Dank für Deine Antwort!

    Leider funktioniert es so noch immer nicht... :(
    Ich habe mich aber jetzt wie folgt beholfen (ich weiß, das ist mit hundertprozentiger Sicherheit nicht die eleganteste Methode): Ich habe ein Header-Bild zusammengebastelt, das eine Breite von 1080 px hat, außerdem einen weißen oberen und einen weißen unteren Rand. Dann habe ich unter die ganze Seite einen weißes Hintergundbild gelegt, das 1920px breit ist und nur bis zum unteren Rand des Header-Bildes reicht.

    Das mit der Schrift übersteigt, glaube ich, leider schon meine Kapazitäten. :( Ich bin erstmal froh, wenn ich das mit dem Bild hinbekomme... ;)

    wenn es dir zu schwer ist es am code anzupassen, dann lösch das ganze element einfach raus. dann erstellst du eine "banner.php" richtest dir die ein wie du willst und fügst die über php an die gewünschte stelle. benutze dann aber andere klassen als die beim alten. :- ) dann kannst du alles ganz easy anpassen. musst eben schauen das der code dann nicht in einem wrapper oder container steht und eine maxbreite dann einschränkt.

    Einmal editiert, zuletzt von rantanplan2000 (16. September 2016 um 22:57)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden