k.music
Jul 14, 2017, updated at Jul 16, 2017 (UTC)
view12030
view12
0
Goto Top

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

GermanQuestionCSSDevelopment
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!
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 343468

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

Printed on: April 23, 2024 at 09:04 o'clock

12 Comments
Latest comment
Goto Top
Member: k.music
k.music Jul 14, 2017 at 19:15:09 (UTC)
Goto Top
Ich glaub ich hab ne Lösung:

<style type="text/css"> 
/*<![CDATA[*/
.jtpl-header--image {
    height: 400px;
}
/*]]>*/
</style>
Member: k.music
k.music Jul 14, 2017 at 19:15:34 (UTC)
Goto Top
müsste ich sonst noch was machen, damit es so bleibt?
Mitglied: 133417
133417 Jul 15, 2017 at 06:40:43 (UTC)
Goto Top
Jimdo Webseiten Header per css verkleinern
Member: k.music
k.music Jul 15, 2017 at 10:09:30 (UTC)
Goto Top
Hallo,
ja das hatte ich schon probiert, das half nichts!

Aber der Code oben ging!

LG
Mitglied: 133417
Solution 133417 Jul 16, 2017 updated at 16:16:51 (UTC)
Goto Top
Kann so bleiben wenn, ein zusätzliches !Important hinter der Anweisung könnte je nach Vorkommen des CSS nicht schaden.
Member: k.music
k.music Jul 16, 2017 at 16:19:24 (UTC)
Goto Top
<style type="text/css">  
/*<![CDATA[*/ 
.jtpl-header--image { 
    height: 400px !Important; 
} 
/*]]>*/ 
</style>

Also so?
Mitglied: 133417
133417 Jul 16, 2017 at 16:40:16 (UTC)
Goto Top
Klar, wo sonst ...
Member: k.music
k.music Jul 16, 2017 at 17:54:55 (UTC)
Goto Top
wie könnte ich die höhe angeben um px zu vermeiden... 70% funktioniert leider nicht
Mitglied: 133417
133417 Jul 17, 2017 updated at 09:01:29 (UTC)
Goto Top
Stichwort vh face-wink
Bsp.: 50 Prozent der aktuell sichtbaren Browserhöhe.
height: 50vh !Important;
Member: k.music
k.music Jul 17, 2017 at 12:55:13 (UTC)
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 Jul 17, 2017 at 13:31:52 (UTC)
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.
Member: k.music
k.music Jul 17, 2017 updated at 14:26:37 (UTC)
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>
GermanQuestionCSSDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment