How to set background image so that header part is fixed upon scrolling
Question
I am trying to set the background image using CSS but the it covers the content on title bar. I have fixed the position of header. But when I scroll the image it covers the header Can anyone tell how to fix it. I have attached a screenshot upon scrolling the header is not fixed.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/styles.css">
<title></title>
</head>
<body>
<section id="title-bar">
<h1> Visualizer </h1>
<a href="url">Login</a>
<a href="url">Registration</a>
<a href="url">Home</a>
</section>
<section id="intro">
<div class="bg-image"></div>
<div class="bg-image"></div>
</section>
</body>
</html>
Upon scrolling the image come above the title-bar but I am trying to get image inside the title bar. CSS code
'''
#title-bar{
background-color: #9E9D89;
padding-top: 25px;
padding-bottom: 15px;
overflow: visible;
position: fixed;
width: 100%;
}
#title-bar h1{
margin-left: 50px;
margin-top: 0;
padding-top: 0;
float: left;
color: white;
}
#title-bar a{
margin-right: 50px;
padding: 10px 0px 10px 0px;
float: right;
color: white;
text-decoration: none;
}
body{
padding: 0;
margin: 0;
}
#title-bar a:hover {
color: white;
background-color: #185ADB;
border-radius: 25px;
padding-left: 10px;
padding-right: 10px;
}
#intro {
margin: 0px;
padding-top: 100px;
}
.bg-image {
/* The image used */
background-image: url("../images/image1.jpg");
/* Add the blur effect */
filter: blur(0px);
-webkit-filter: blur(0px);
/* Full height */
height: 400px;
/* Center and scale the image nicely */
/* background-position: center; */
background-repeat: no-repeat;
background-size: cover;
}
[enter image description here][1]
[1]: https://i.stack.imgur.com/k1tFP.jpg
1 answers
solution1
0 2021-07-22 02:49:06
You have to apply a z-index higher than the section.
As per MDN:
The
z-indexCSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
In our case, simply apply z-index: 1 to #title-bar will make it overlap the section, since its z-index is default to 0.
#title-bar { background-color: #9E9D89; padding-top: 25px; padding-bottom: 15px; overflow: visible; position: fixed; width: 100%; z-index: 1; } #title-bar h1 { margin-left: 50px; margin-top: 0; padding-top: 0; float: left; color: white; } #title-bar a { margin-right: 50px; padding: 10px 0px 10px 0px; float: right; color: white; text-decoration: none; } body { padding: 0; margin: 0; } #title-bar a:hover { color: white; background-color: #185ADB; border-radius: 25px; padding-left: 10px; padding-right: 10px; } #intro { margin: 0px; padding-top: 100px; } .bg-image { /* The image used */ background-image: url("https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"); /* Add the blur effect */ filter: blur(0px); -webkit-filter: blur(0px); /* Full height */ height: 400px; /* Center and scale the image nicely */ /* background-position: center; */ background-repeat: no-repeat; background-size: cover; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/styles.css"> <title></title> </head> <body> <section id="title-bar"> <h1> Visualizer </h1> <a href="url">Login</a> <a href="url">Registration</a> <a href="url">Home</a> </section> <section id="intro"> <div class="bg-image"></div> <div class="bg-image"></div> </section> </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.