Hintergrundbild richtig positionieren?

[Webhufi]

Hallo,

ich habe HIER testhalber ein Bild mit folgendem Code eingefügt:

<style>
body {
background-image: url("http://donnerhuf.de/HG-Bilder/10_97-2.jpg");
background-position:center;
background-attachment:fixed;
background-size:cover;
}
</style>

Dummerweise wird dabei aber das Bild oben beschnitten!

Wie kann ich das bitte berichtigen? Ein halber Kopf ist irgendwie doof... ;-)

Dankeschön schon mal für eventuelle Vorschläge!

Viele Grüße
Norbert

 

[Jan-Frederik Stieler]

Hi,
also hier wird nichts abgeschnitten: JS Bin
außer die Bildschirmhöhe ist zu klein so dass das background-size:cover; von der Breite nicht mehr hinhauen würde.

Grüße

 

[Webhufi]

Hm... Das verstehe ich nicht. Dieses Bild ist eher zu klein und wird durch 'cover' gestreckt. Nehme ich andere, größere Bilder, werden sie auch abgeschnitten.
Ich denke also, dass dies am verwendeten CMS liegen muss.

Dankeschön und viele Grüße!

 

[basti1012]

wenn ich bei mir das background-position weg lasse sieht es bei mir gut aus. Ohne das ist der Kopf auch ab

 

[Webhufi]

Hervorragend, Basti1012! Auf dieses Idee wäre ich nie und nimmer gekommen...
DANKE!

 

[Jan-Frederik Stieler]

Hi,
dafür kann es jetzt passieren das die ganze Person verschwindet wenn das Fenster nicht breit genug ist.
Nur als Anmerkung.

 

[Webhufi]

Stimmt... :-(

 

[Sempervivum]

Das lässt sich verbessern durch background-position: center top;
Scrollt man nach unten, wäre es besser, wenn das Bild etwas nach unten verschoben wäre:
background-position: center 50px;
Allerdings taucht dann oben eine freie Fläche auf, wenn die Scrollposition ganz oben ist. Besser das Menü dauerhaft oben lassen.

 

[Webhufi]

Klasse!!! 'center top' ist die perfekte Wahl!
Und: Das Menü dauerhaft oben lassen war auch ein toller Tipp: Die Page wirkt dadurch besser.

Ganz herzlichen Dank! Dieser gilt auch für alle anderen, die in meinem Beitrag etwas geschrieben haben.