I'm making a "parallax" effect but it doesn't work
Question
I'm kinda new to HTML and CSS and am building a website, but I don't seem to be abled to create a parallex effect on my image... The image is just not showing. Can you see what's wrong with my (simplyfied) code?
.parallax { background-image: url("images/start-background.jpg"); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
<!DOCTYPE html> <html> <head> <link href="./style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="parallax"></div> <h1 class="title-home">This is my title</h1> <h2 class="subtitle-home">This is my subtitle. Example, example, etc.</h2> <div class="parallax"></div> </body> </html>
1 answers
solution1
0 2020-02-17 17:38:40
You should set a min-height .I made 500px here but you can change.
.parallax { /* The image used */ background-image: url("https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/cumulus-cloud.jpg"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
<!DOCTYPE html> <html> <head> <link href="./style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="parallax"></div> <h1 class="title-home">This is my title</h1> <h2 class="subtitle-home">This is my subtitle. Example, example, etc.</h2> <div class="parallax"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Making a parallax effect on a flexbox column
Simple parallax scrolling doesn't work
Parallax effect on bootstrap carousel won't work in Firefox
How can I make this parallax effect work on mobile browsers?
I'm making a flashcard game but the "Next" button won't work
Jquery scrolling with pure css parallax doesn't work
Background blocks in parallax doesn't work when they are full-sized
Parallax background doesn't work (Only one image)
I'm trying to make parallax effect on scroll but for the items to move the opposite way
Button doesn't work when I'm back on starter page
Related Tags