Bakgrundsbild

4 svar · 746 visningar · startad av Poffe 18 okt. 2012

PoffeMedlem sedan apr. 20022 743 inlägg

Frågan18 okt. 2012 13:40#1

Hej

Jag har ett problem som jag sutit och sökt på nu nån timme utan att lyckas lösa. Vet inte riktigt vad jag ska söka på :)

Jag har en hemsida där jag vill ha en bakgrundsbild. Bilden ska anpassas så att den alltid täcker bredden av webbläsaren. Om innehåller får plats utan att scrolla så ska bilden bara brytas av. Det har har jag lyckats med genom detta i body-taggen:

	background:url("/img/bg_bottom.jpg") no-repeat; 
	background-size:cover;
	background-attachment: fixed;
	height: 100%;

Men nu vill jag att om sidan kan scrollas så ska bakgrundsbilden följa med tills den tar slut och sen stanna och bli "fixed".

Någon som förstår hur jag menar och har en idé på lösning?

voigtann1Medlem sedan juni 20019 519 inlägg

18 okt. 2012 14:01#2

sätt den andra bakgrunden i en div som har en min-height: 100% och postion absolut?

PoffeMedlem sedan apr. 20022 743 inlägg

18 okt. 2012 14:36#3

Hmm, nu vet jag inte om du missförstod mig. Jag har alltså bara en bakgrundsbild.

Bredden ska vara lika som fönstret och proportionerna ska hållas intakta.

Om det rä så att hela bilden inte får plats, på höjden alltså, så ska den scrollas om användaren scrollas men stanna då den nått botten. Om det inte går att scrolla på sidan så ska den bara klippas av så att säga.

Lösningen kanske är en div på nått vänster, du kanske har ett exempel?

Tack för svaret förresten :)

voigtann1Medlem sedan juni 20019 519 inlägg

18 okt. 2012 14:49#4

vet inte om detta ens går... du säger ju att den skall background-size:cover; är du ute efter en 'Parallax' scroll (http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/)? Eller är det om bilden är 1200px hög och fönstret är 1000px om jag scrollar över 1200px så skall den "fastna" i botten? tror i så fall att du få vända dig till JS för att ändra background-position under tiden du scrollar.

PoffeMedlem sedan apr. 20022 743 inlägg

18 okt. 2012 15:46#5

voigtann1 skrev:

vet inte om detta ens går... du säger ju att den skall background-size:cover; är du ute efter en 'Parallax' scroll (http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/)?

Nej inte så men det jag ju riktigt coolt, kanske kan komma till nytta nån annan gång :)

voigtann1 skrev:

Eller är det om bilden är 1200px hög och fönstret är 1000px om jag scrollar över 1200px så skall den "fastna" i botten? tror i så fall att du få vända dig till JS för att ändra background-position under tiden du scrollar.

Exakt så. Men det var ju synd att det inte finns "inbyggt". Får se om jag hittar någon bra lösning med javascript nu när jag vet lite mer vad jag ska söka efter!

Tack för hjälpen!