CODEWITHSUNDEEP
htmlcss
Val Sedano
Val Sedano

Reputation: 21

Text Lay Over Header Image

I have the following HTML, but can't seem to get the text to LAY OVER the image. I'd like the h1, h2, and ul li tags to LAY OVER the image.

I know I can put the image in CSS, I just need to know how to edit the CSS (or HTML?) so the text will LAY OVER the image.

<header>
<img src="Images/Damask.png" width="100%" border="0" height="200" class="header">
    <a href="index.html" id= "logo">![enter image description here][1]
        <h1>J Barnes Events</h1>
        <h2>Indianapolis's Finest<h2>   
    </a>
    <nav>
        <ul>
            <li><a href="index.html" class="selected">Events</a></li>
            <li><a href="about.html">Blog</a></li>
            <li><a href="contact.html">About</a></li>
        </ul>
    </nav>
</header>

Upvotes: 1

Views: 2095

Answers (1)

Rasel
Rasel

Reputation: 5734

You can use relative position to img and absolute position to child element which to lay over. Try like this-

<header>
<style type="text/css">
.header{
position:relative;
}
a{
position:absolute;
left:0;
top:0;
}
.nav{
position:absolute;
left:0;
top:100;
}
</style>
</header>
<img src="Images/Damask.png" width="100%" border="0" height="200" class="header"/>
    <a href="index.html" id= "logo">![enter image description here][1]
        <h1>J Barnes Events</h1>
        <h2>Indianapolis's Finest</h2>   
    </a>
    <nav class="nav">
        <ul>
            <li><a href="index.html" class="selected">Events</a></li>
            <li><a href="about.html">Blog</a></li>
            <li><a href="contact.html">About</a></li>
        </ul>
    </nav>

Upvotes: 3

Related Questions