Search code examples
htmlcssparallax

[CSS]Parallax effect and fixed text

I face a problem trying to make use of a parallax effect following the w3school "tutorial"

What I want is a background image with a text title on it and when scrolled down the next panel will be over the background image and the title.

I have been trying without success so far the title is fixed but is not covered by the next panel like this:

screenshot

I have tried to use the z-index in all sections but I can't make it work.

Do you have an idea of what is wrong ?

CODE:

.banner-section{
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4c/Banksy_lovers.jpg');
  min-height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

p.wanted-name {
	position: fixed;
	margin-left: 35%;
	top:15%;
	pointer-events: none;
	font-family: wanted;
	color:#eeeeee;
	font-size: 12vw;
}

.intro-section {
	padding:100px;
	background-color: white;
	box-shadow: 0 -4px 8px #4d4d4d;
}

.intro-text {
	padding-top: 70px;
}

.intro-text p {
	margin-bottom: 100px;
	text-align: justify;
}

.sub-title{
	color: #868686;
	font-size: 12px;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.sp-title {
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 45px;
	letter-spacing: 6px;
}

.button-wanted {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	padding: 20px;
	text-transform: uppercase;
	color: black;
	font-size: 14px;
}

.button-wanted:link{
	color:black;
}
	<body><!-- Banner section start -->	
	<div class="banner-section">
		<p class="wanted-name">Wanted</p>
	</div> 
	<!-- End of banner section-->	

	<!-- First hint section -->
	<div class="intro-section">
		<div class="container-fluid">
			<div class="row">

		<div class="col-xl-4 intro-text">
		<span class="sub-title">Wanted agency</span>
		<h3 class="sp-title">Simply the best</h3>
		<p>Integer nec bibendum lacus. Suspendisse dictum enim sit amet libero malesuada feugiat. Praesent malesuada congue magna at finibus. In hac habitasse platea dictumst. Curabitur rhoncus auctor eleifend. Fusce venenatis diam urna, eu pharetra arcu varius ac. Etiam cursus turpis lectus, id iaculis risus tempor id.</p>
		<a href="about.html" class="button-wanted">Read More</a>
		</div>

		<div class="col-xl-7 offset-xl-1">
		<img src="https://fr.wikipedia.org/wiki/Banksy#/media/File:Banksy_lovers.jpg" alt="">
		</div>
	</div>
	</div>
	</div>
  </body>

I have never used the snippet before sorry if I did it wrong.

Thank you.

Regards,

Unic0

Solution

  • The reason this your use of z-index is not working is because your intro-section div is not relatively positioned.

    Change the following:

    .intro-section {
    padding:100px;
    background-color: white;
    box-shadow: 0 -4px 8px #4d4d4d;
    position: relative;
}

    z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative - SOURCE

    Additionally, with the text, you typically don't want to use a margin to center text as it will cause issues when using different browser sizes (responsiveness). Instead change your wanted-name to the following:

    p.wanted-name {
    position: fixed;
    top: 15%;
    pointer-events: none;
    font-family: wanted;
    color: #eeeeee;
    font-size: 12vw;
    left: 0;
    right: 0;
    text-align: center;
}