Hintergrundbild strecken- wie?

[Knowhow-Sauger]

Hallo Freunde,

ich habe mich bereits schlau gemacht wie man ein Hintergrundbild skaliert. In der colours.css habe ich folgendes eingetragen:

Code: Alles auswählen

html, body {
	color: #ffffff;
	background-color: transparent;
	background-image: url('/styles/lederhosen2014/theme/images/bg.jpg'); 
background-repeat:no-repeat; 
background-size: 100%; 
-ms-background-size: 100%; 
-moz-background-size: 100%; 
-webkit-background-size: 100%; 
-o-background-size: 100%; 
background-attachment: fixed; 
padding: 0px;
}

Eigentlich müsste es ja klappen. Aber ich sehe auf meinem Laptop nur den oberen Teil der Berge:
http://www.kurzehosenforum.com/styles/l ... ges/bg.jpg

Das Untere (wo es grün ist), sieht man überhaupt nicht.
Das ist ja an und für sich keine richtige Streckung.
Kennt ihr noch Tricks, wie man das Bild auch wirkich strecken kann, sodass man das volle Bild sieht?
Danke!

[HabNurNeFrage]

Hi,

hier das z.Zt. passendste CSS dafür:

Code: Alles auswählen

background: url('bg_image.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

LG

PS: Für noch edlere Anpassungen gibt es noch Lösungen mit jQ.

[Knowhow-Sauger]

Danke!
Habe mir den Code eingebaut. Klappt aber immer noch nicht.
Ich sehe immer nur den oberen Teil des Bildes.
Liegt vielleicht auch daran, dass das Bild:
http://www.kurzehosenforum.com/styles/l ... ges/bg.jpg
im Hochformat ist und der Bildschirm auf meinem Laptop Breitband-Format hat.
Aber eigentlich suche ich einen Code, der genau diese Bilder der Bildschirmgrösse anpasst.
Nicht jeder hat Breitband. Einige haben ja auch einen quadratischen Bildschirm. Was wäre denn für ein Format am sinnvollsten? Eher ein Breitband-Bild oder eher 4:3?

[Crizzo]

Das Bild hat doch Querformat und sollte deshal schon passen.

[HabNurNeFrage]

Hi,

ist nunmal so, dass die Aspect-Ratio eines Bildes nicht bei allen Bildschirmauflösungen mit CSS cover passend gezerrt wird.
Mit CSS wird die original Aspect-Ratio beibehalten und bei manchen Auflösungen ist halt nur ein Bildauschnitt zu sehen.

Auf den Viewport verzerren kann man das Bild mit CSS nur in einem Container:

CSS: #bg_image { position:absolute; z-index:-10; width:100%; height:100%; }
HTML: <div><img id="bg_image" src="bg_image.jpg" alt=*" /></div>

Das wiederum klappt aber nur dann, wenn der Page-Body margin:0; padding:0; width:100%; height:100%; im CSS hat...

Auch probieren könntest Du:

Code: Alles auswählen

background-image: url('bg_image.jpg');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto; 

LG

[Knowhow-Sauger]

alles klar. Danke!
Dein Code scheint irgendwie nicht zu funktionieren. Naja, bleib ich halt beim Alten.