Relative section covering header

HTML-CSS
1

Hi I am trying to set up a page that has an image as background, and I want a nav bar that sits on top of the image. Something like this page https://www.spinxdigital.com/ .
I have had to set the image to relative so I can have text on it, but now that I have set it to relative, the image covers the header/navbar . Could someone please help me out with how to fix this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <header>
        <ul id="navbar">
         <li><a href="secton1"></a>Section 1</li>
         <li><a href="secton2"></a>Section 2</li>
         <li><a href="secton3"></a>Section 3</li>
         <li><a href="secton4"></a>Section 4</li>
        </ul>
    </header>


    <section id= "headerBackground">
        <div class="gameDetails">GAME NAME,
        <br>
        A WHATEVER GAME</div> 
       
        

    </section>
</body>
</html>

html{
    background-color: black;
}
#navbar
{
    display: block;
    float: right;        
    color: aliceblue;       
    margin: 2em;
    background-color: green;
}

#navbar li
{
    display: inline;
    vertical-align: auto;
}

#headerBackground
{    
    display: block;
    background-image: url('assets/topBackground.png');
    background-size: cover;
    background-position: center; 
    height: 500px;
    font-size: 1em;
    color:aliceblue;
    position: relative;
    top: 80sepx;
}

.gameDetails
{  
    position: absolute;
    bottom: 10%;
    right: 10%;
}
2

if you want your background images to your navbar then why you are giving background-image property to different section than navbar
for example

i have one div and i want background image to it then i will give background-image to it

<div>
    // my other code  here 
</div>

<style>
   div {
         background-image:url('myimagepath');
    }
</style>
3

You can set z-index: -1 on #headerBackground.

For it to be like on the site you linked to you will want to get rid of the margin on the body and remove the top offset on #headerBackground (you have a typo for the unit on that anyway so it doesn’t do anything).

Edit: If you are going to make the header/nav position fixed you might want to give the header/nav a positive z-index instead. Just to avoid any stacking issues with other elements on the page.

4

The way I read your question, the body has a background image , then the nav can be positioned with margin. It’s automatically on top of a background.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.