webForumDet fria alternativet

Hur visa hela bakgrundsbilden med css?

HTML & CSS

4 svar · 1 014 visningar · startad av Dr-man

Medlem sedan juli 2002732 inlägg
Frågan#1

Hur visar man med hjälp av css hela bakgrundsbilden på en websida?

Medlem sedan aug. 20068 090 inlägg
#2

Menar du att hela bilden ska visas oavsett hur stort webbläsarfönstret råkar vara?
Tror inte det går om du har den bakgrundsbild. Däremot funkar det om du lägger en container "under" hela webbplatsen och placerar bilden i den.

Ungefär så här:

<html><head></head>
<body>
<div id="bakgrundsbild">
<img src="minbild.jpg" /></div>
<div>Sidans innehåll</div>

</body>

och i stilmallen lägger in detta:

#bakgrundsbild {
position:absolute;
z-index:-100;
top:0;
left:0;
width:100%;
}
#bakgrundsbild img {
width:100%;
}

...ungefär....

Medlem sedan apr. 20003 174 inlägg
#3

Det finns en enkel lösning som i dagsläget bara fungerar i webbläsare som har stöd för CSS3, dvs nyare webbläsare.

Om det är ett alternativ som passar dig så kan du lägga till detta i din stimall:

html {
	background: url(din-bakgrundsbild.png) no-repeat 50% 50% fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
Medlem sedan juli 2002732 inlägg
#4

Palle skrev:

Det finns en enkel lösning som i dagsläget bara fungerar i webbläsare som har stöd för CSS3, dvs nyare webbläsare.

Om det är ett alternativ som passar dig så kan du lägga till detta i din stimall:

html {
	background: url(din-bakgrundsbild.png) no-repeat 50% 50% fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Även IE 9.0 klarar att hantera detta?

Medlem sedan apr. 20003 174 inlägg
#5

Dr-man skrev:

Även IE 9.0 klarar att hantera detta?

Ja, IE9 har en del stöd för CSS3 implementerat, b.la background-size.

262 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)
120 ms — ändringar (db)