Relative section covering header

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 .
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">
    <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">
        <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>

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

    background-color: black;
    display: block;
    float: right;        
    color: aliceblue;       
    margin: 2em;
    background-color: green;

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

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

    position: absolute;
    bottom: 10%;
    right: 10%;

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

    // my other code  here 

   div {

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.

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.

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