k.music
Goto Top

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!

Content-Key: 343468

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

Ausgedruckt am: 28.03.2024 um 12:03 Uhr

Mitglied: k.music
k.music 14.07.2017 um 21:15:09 Uhr
Goto Top
Ich glaub ich hab ne Lösung:

<style type="text/css"> 
/*<![CDATA[*/
.jtpl-header--image {
    height: 400px;
}
/*]]>*/
</style>
Mitglied: k.music
k.music 14.07.2017 um 21:15:34 Uhr
Goto Top
müsste ich sonst noch was machen, damit es so bleibt?
Mitglied: 133417
133417 15.07.2017 um 08:40:43 Uhr
Goto Top
Mitglied: k.music
k.music 15.07.2017 um 12:09:30 Uhr
Goto Top
Hallo,
ja das hatte ich schon probiert, das half nichts!

Aber der Code oben ging!

LG
Mitglied: 133417
Lösung 133417 16.07.2017 aktualisiert um 18:16:51 Uhr
Goto Top
Kann so bleiben wenn, ein zusätzliches !Important hinter der Anweisung könnte je nach Vorkommen des CSS nicht schaden.
Mitglied: k.music
k.music 16.07.2017 um 18:19:24 Uhr
Goto Top
<style type="text/css">  
/*<![CDATA[*/ 
.jtpl-header--image { 
    height: 400px !Important; 
} 
/*]]>*/ 
</style>

Also so?
Mitglied: 133417
133417 16.07.2017 um 18:40:16 Uhr
Goto Top
Klar, wo sonst ...
Mitglied: k.music
k.music 16.07.2017 um 19:54:55 Uhr
Goto Top
wie könnte ich die höhe angeben um px zu vermeiden... 70% funktioniert leider nicht
Mitglied: 133417
133417 17.07.2017 aktualisiert um 11:01:29 Uhr
Goto Top
Stichwort vh face-wink
Bsp.: 50 Prozent der aktuell sichtbaren Browserhöhe.
height: 50vh !Important;
Mitglied: k.music
k.music 17.07.2017 um 14:55:13 Uhr
Goto Top
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!
Mitglied: 133417
133417 17.07.2017 um 15:31:52 Uhr
Goto Top
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.
Mitglied: k.music
k.music 17.07.2017 aktualisiert um 16:26:37 Uhr
Goto Top
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>