Reputation: 21
My text/header is not showing over my image which I'm trying to use as a background to this webpage. This is the code I have right now:
HTML:
<body id="body">
<div id="navbar">
<h1 id="name">Lorem ipsum</h1>
<img class="backgroundimg" src="leaf.jpg" alt="A leaf"/>
</div>
<div class="backimg">
<img class="backgroundimg" src="buildings.jpg"/>
</div>
<div class="backimg">
<img class="backgroundimg" src="squares.jpg"/>
</div>
</body>
CSS:
body {
background-color:black
}
backgroundimg {
position:relative;
width:1175px;
}
name {
position:absolute;
color: white;
z-index;
}
Any tips? P.S. I took out the '#' and '.' to the appropriate names in CSS.
Upvotes: 2
Views: 6611
Reputation: 192
Add this to your css file
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
adjust top,left and width according your need, let me know if this helped
Upvotes: 0
Reputation: 2579
You can use z-index, like Anil Panwar said(https://stackoverflow.com/a/34374513/4900669)
#name {
position:absolute;
color: white;
z-index: 10;
}
https://jsfiddle.net/08voh0fp/
Upvotes: 2