Hallo zusammen,

ich wollte meiner Website einen neuen Look verschaffen und alles soweit top, außer einem Problem an dem meine fehlenden CSS Kenntnisse scheitern.
Und zwar arbeite ich am 'Rome' Layout, welches ein großes Hintergrund direkt am Start hat. Da auf meiner Website (tausendundeins-staufen.jimdo.com) nur ein Pattern als Hintergrund ist, brauche ich davon nicht das ganze Bild sondern nur einen schmalen Ausschnitt, damit man direkt auf den Inhalt der Seit kommt.

Ich hab schon etliche CSS versuche hinter mir und komme nicht zum Ergebnis, denke aber das ist ein leichter fix? Wäre super froh über eine Lösung, Danke!

Hi

Probiere mal Folgendes:

.jtpl-header--image {
    height: 151px; 
}
 
@media (max-width:767px){
.jtpl-header--image {
    height: 50px;
}
}
 

Die Höhe ist natürlich vom Wert her veränderbar. 151px, bzw. 50px sind nur Beispiele... (Der "@media-Code" bezieht sich auf die Darstellung bei Mobil-Geräten.)

Gruss
Butterman

Hi!

Danke tausend Mal!! Ich habe die Höhe noch ein wenig verändert damit es auf meine Wünsche passt, aber das Problem ist damit behoben :)

Ich danke dir für deine Hilfe :)

Wobei eine Frage habe ich doch noch. Ich habe nun das Hintergrund Bild auf die genauen Maße bearbeitet (335 px x 1920 px) und als Hintergrund eingefügt. Jimdo jedoch skaliert das Bild automatisch und zoomt sehr stark rein. Ich habe es schon mit background-size: initial versucht, jedoch ohne Erfolg. Weiß jemand, wie da behoben werden kann und mein Bild in voller Größe angezeigt werden kann?

Hi

Das ist nun passiert, weil dein Hintergrundbild eine Höhe von "100vh" hat. Gemäss Code:

.jtpl-background-area {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: -1;
}
 

(vh bedeutet "die Höhe, die sich an den Viewport orientiert". Viewport ist der Bereich, den Dein Browser anzeigt. 100vh orientiert sich praktisch an der ganzen sichtbaren Höhe. Deshalb wurde dein Bild, obwohl es eigentlich eine kleinere Höhe hatte, sozusagen aufgeblasen.) Probiere mal Folgendes:

.jtpl-background-area {
    position: fixed;
    height: 335px;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: -1;
}
 

Nun hast du für die Höhe des Hintergrundbildes "335px" eingegeben. Kannst du auch variieren.

Dein Hintergrundbild hat in dieser neuen Version des Hintergrundbildes allerdings in der Mitte ein Logo. Das wird jetzt natürlich etwas verdeckt, da du ja die Höhe verkleinert hast. Oben links ist das Logo ja nochmals... Vielleicht müsstest du dich entscheiden, entweder nur Streifen beim Hintergrundbild oder mit Logo, dann aber vielleicht doch einen grösseren Wert für die Höhe.

Gruss
Butterman

Wow, danke Dir!!

Mit der ausführlichen Erklärung macht das jetzt alles Sinn, habe es so angewendet und hat funktioniert. Das Logo wurde überdeckt, daher habe ich es in Photoshop nochmals verkleinert und tiefer im Bild angebracht.

Das gleiche habe ich dann auch für die mobile Version angepasst, natürlich mit den Werten dafür. Dort habe ich das Bild dann aber noch mit einem Offset von oben (ich glaube um die ca 150) versetzt, damit es perfekt im Balken sitzt. Damit bin ich jetzt erstmal zufrieden :)

Danke nochmals für die schnelle Hilfe und super ausführliche Erklärung, jetzt kapier ich es endlich :)

Einen schönen Tag noch!

Gerne. Freut mich, dass es funktioniert. Dir auch einen schönen Tag.

Gruss
Butterman