Domov > Programiranje > Responsive image background over fold
stran 1 od 1 |< < 1 > >|
Responsive image background over fold
 
wssrpnc 9. sep 2014 14:51:07 Pridružen od:
22. feb 2011
1022 objav
 762 169 20
#1

Rad bi naredil en page, kjer bo neodvisno od širine zaslona over fold en container in pa bolj pomembno, ozadje s fotko, ki se bo prilagajala širini zaslona.



Ko bo user poscrolal navzdol, pa bi bilo normalno ozadje (brez tiste fotke, ki bo vidna na 'prvem ekranu'). Vedno pa mora biti over fold v ozadju fotka.



Kako se imenuje ta tehnika? Hvala.


všeč(0) ni všeč(2) spam(0)
 
 
dr79asyin 9. sep 2014 18:12:12 Pridružen od:
19. feb 2014
80 objav
 48 3 0
#2

CSS stil, če si to mislil



slika-ozadje {

background: url(slika/bg.jpg) no-repeat center center fixed;

background-size: cover;

}



http://www.w3schools.com/cssref/css3prbackground-size.asp

http://css-tricks.com/perfect-full-page-background-image/

http://nicolasgallagher.com/flexible-css-cover-images/


všeč(0) ni všeč(0) spam(0)
 
 
wssrpnc 9. sep 2014 19:06:48 Pridružen od:
22. feb 2011
1022 objav
 762 169 20
#3

ne s cover sem probal, pa ni ok. evo točno tako bi imel, že prej bi moral napisat:

http://wpninjas.com/


všeč(0) ni všeč(0) spam(0)
 
 
gnome 9. sep 2014 20:55:12 Pridružen od:
27. apr 2010
829 objav
 412 47 10
#4

Parallax scroll :)


všeč(1) ni všeč(0) spam(0)
Adobe Commerce/Magento 2 & Laravel + {VueJS/React} razvijalec | Moj #1 resource za Laravel & PHP | Claude Code alternative 10% OFF
 
 
kolenko 10. sep 2014 07:01:12 Pridružen od:
20. jan 2011
172 objav
 197 16 4
#5

Evo 2 tutoriala:





ali s pomočjo JS:

ihatetomatoes.net/simple-parallax-scrolling-tutorial



Upam, da kaj pomaga.


všeč(3) ni všeč(0) spam(0)
.:: Portfolio :: Instagram @runningkolenko :: runningkolenko @ Facebook ::.
 
 
wssrpnc 10. sep 2014 07:06:54 Pridružen od:
22. feb 2011
1022 objav
 762 169 20
#6

super hvala, sploh nism na parallax pomislil


všeč(0) ni všeč(0) spam(0)
 
 
Domov > Programiranje > Responsive image background over fold
stran 1 od 1 |< < 1 > >|
 

🔒 Za odgovor na to temo se moraš prijaviti.

Prijavi se