AddisonDevelops
AddisonDevelops

Reputation: 21

HTML Text not showing over Image

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

Answers (3)

Aadit33
Aadit33

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

Ivan
Ivan

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

Anil  Panwar
Anil Panwar

Reputation: 2622

Use z-index to show the text over image.

Upvotes: 7

Related Questions