Menu
I'm trying to display a heading over the image on my website. Here's a fiddle:
https://jsfiddle.net/o3942ppa/1/
I tried to fix the problem by creating a heading with id header such as:
<h2 id="header">Text</h2>
and style it absolutely with a z-index to ensure it displays on top like:
#header{
position: absolute;
z-index: 1000;
top: 200px;
left: 200px;
}
I was assuming that this would result in positioning the title on top of all over elements, positioned from the edge of the document. However, I didn't get the desired result. How would I go about doing this? Also, I read last night that it's generally better to using floats than positioning. Not sure if that applies in this case, or if it's true at all. I would appreciate if someone could weigh in.
419
You have to adjust the structure of your HTML content so you #header is before your .parallax. Using your desired style:
.parallax{
background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
#header{
position: absolute;
z-index: 1000;
top: 200px;
left: 200px;
}
.text-box{
height: 600px;
padding: 50px;
}
@media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
.navbar {
margin-bottom: 0 !important;
}<title>Bootstrap Default Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<h1 id="header">Text</h1>
<div class="parallax"></div>
<div class="col-lg-12 text-box text-center">
<h1>Restauraunt Heading</h1>
</div>
</body>Another solution is to simply put your h1 into a paralax div...
.parallax{
background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
position:relative;
}
.text-box{
height: 600px;
padding: 50px;
}
@media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
#header{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.navbar {
margin-bottom: 0 !important;
}<title>Bootstrap Default Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="parallax"><h1 id="header">Text</h1></div>
<div class="col-lg-12 text-box text-center">
<h1>Restauraunt Heading</h1>
</div>
</body>Your .paralax class also needs to have added position attribute as relative or absolute. You can also set z-index: 0
Ah, and z-index: 1 is enough for header :)
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
