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>
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>
Check the console. Probably the wrong path. Parallax requires JavaScript as well.
@Phix The image not showing could be a path issue, but parallax does not require JS. There are css only solutions.
