Seite 1 von 1
Hintergrundbild strecken- wie?
Verfasst: 08.04.2014 18:11
von 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!
Re: Hintergrundbild strecken- wie?
Verfasst: 08.04.2014 22:38
von 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.
Re: Hintergrundbild strecken- wie?
Verfasst: 08.04.2014 22:59
von 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?
Re: Hintergrundbild strecken- wie?
Verfasst: 08.04.2014 23:05
von Crizzo
Das Bild hat doch Querformat und sollte deshal schon passen.
Re: Hintergrundbild strecken- wie?
Verfasst: 08.04.2014 23:31
von 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
Re: Hintergrundbild strecken- wie?
Verfasst: 08.04.2014 23:53
von Knowhow-Sauger
alles klar. Danke!
Dein Code scheint irgendwie nicht zu funktionieren. Naja, bleib ich halt beim Alten.
