Jimdo Header Hintergrundbild mit Hilfe von CSS in Head verkleinern - nicht px benutzen

Hallo,

ich benötige eure Hilfe beim erstellen einer Webseite.

Ich habe bei Jimdo das Design Rome gefunden, welches mir sehr gut gefällt.
Nun habe ich schon eine Testseite erstellt.

Leider ist das Hintergrundbild im Header so hoch und füllt beim öffnen der Seite 3/4 der höhe aus, das würde ich gerne ändern.

Bisher habe ich es nur geschafft per CSS die höhe der Bilddatei zu verringern, darunter blieb aber dann ein weißer Rand.

Ich würde mich sehr freuen, wenn ihr mir helfen könntet.

LG und Danke!

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 343468

Url: https://administrator.de/contentid/343468

Ausgedruckt am: 24.11.2024 um 17:11 Uhr

12 Kommentare

Neuester Kommentar

Ich glaub ich hab ne Lösung:

<style type="text/css"> 
/*<![CDATA[*/
.jtpl-header--image {
    height: 400px;
}
/*]]>*/
</style>

müsste ich sonst noch was machen, damit es so bleibt?

Jimdo Webseiten Header per css verkleinern

Hallo,
ja das hatte ich schon probiert, das half nichts!

Aber der Code oben ging!

LG

Kann so bleiben wenn, ein zusätzliches !Important hinter der Anweisung könnte je nach Vorkommen des CSS nicht schaden.

<style type="text/css">  
/*<![CDATA[*/ 
.jtpl-header--image { 
    height: 400px !Important; 
} 
/*]]>*/ 
</style>

Also so?

Klar, wo sonst ...

wie könnte ich die höhe angeben um px zu vermeiden... 70% funktioniert leider nicht

Stichwort vh

Bsp.: 50 Prozent der aktuell sichtbaren Browserhöhe.
height: 50vh !Important;

Oh, das sieht ja schon super aus! Danke für die Hilfe. :D

Gibt es auch ne Möglichkeit das an Handys im Hochformat auf 30vh zu beschränken? Bei allen anderen Geräten sieht es Top aus!

Zitat von @k.music:
Gibt es auch ne Möglichkeit das an Handys im Hochformat auf 30vh zu beschränken? Bei allen anderen Geräten sieht es Top aus!

Klar, machst du eine CSS Media Query und trägst dort die gewünschte Höhe ein.

Danke für die nette Hilfe!

Ich hab das jetzt mal so gelöst:

<style type="text/css"> 

/*<![CDATA[*/
.jtpl-header--image {
    height:50vh !important;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
    .jtpl-header--image {
    height:20vh !important;
        }
}

/*]]>*/
</style>