Header Hintergrundbild - fixe Höhe

  • Ich habe ein Bild welches ich im Header anzeigen lasse. Ich möcht gerne, dass das Bild nur in der Breite skaliert wird, wenn möglich soll das Bild in der Höhe gleich bleiben.

    In der Mobilansicht sieht das super aus (in der Mobilansicht wird das noch um mind 60% kleiner):

    In der Desktopansicht sieht man aber leider nur den Himmel.


    CSS:

    CSS
    .pageHeader {
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative;
        z-index: 300;
        height: 300px;
        background: url(/images/evkithes/thesa_mbg.jpg);
          background-size: cover;    
    }

    Wie bekomme ich das so hin, dass auch in der Normalversion das Bild so "gestreckt" wird, das man das komplette Bild sieht?

    Nebenfrage: kann man statt der Pfadangbae auch eine Variable nutzen? Ich habe den Pfad ja schon in den Stileinstellungen angegeben.

    Edit: Zur Liveasnicht geht es hier entlang: http://evkithes.falkenbann.info/

  • Hier müssen sie es mit Paint.net die Bildgröße ändern.

    Den das Bild ist zu groß.

    Dir ist klar dass Bildschirmauflösungen variabel sind und die Software Seiten responsive ausgibt? Dein Vorschlag ist für mich leider nicht logisch, auch wenn ich von der Designthematik wenig Ahnung habe.

    Jemand, der da mehr Expertise hat, z. B. Black Rider, sollte hier besser helfen können.

  • Wenn du es wirklich gestreckt haben willst, dann gib bei background-size einfach zwei Werte mit. Der erste ist dann für die horizontale Skalierung (bleibt bei cover) und die zweite für die vertikale (beispielsweise dann mit einem festen Pixelwert).

    Das ist allerdings nicht zu empfehlen, da das Bild dann verzogen wird.

    Nebenfrage: kann man statt der Pfadangbae auch eine Variable nutzen? Ich habe den Pfad ja schon in den Stileinstellungen angegeben.

    Ja, kann man:

    background: url(${style_image_path}thesa_mbg.jpg);

Jetzt mitmachen!

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