How do I Add A Background Image to my Navigation Bar?

Question

I am having trouble adding an image to navigation bar. I have tried adding

#header, #nav {
background-image: url("https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg") repeat;
}

HTML:

<nav>
  <ul>
  </ul>
</nav>
</header>

CSS:

  #header #nav { 
  background-image: url(https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg);
  background-repeat: repeat;
}

I want the Navigation bar to have a marble background

Answer 1

Give this a try. Also I changed your background-image style to just background so that you could include the "repeat" shorthand property. html

<header>
    <nav>
        <ul></ul>
    </nav>
</header>

css

    header, nav {
    background: url("https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg") repeat;
    width: 300px;
    height: 200px;
}

Answer 2

First you are assigning css properties to elements with ids header and nav. if this is the case add the id attribute to each element.

Second the background-image property only allows you to set a background image but you want your image to repeat, instead use background

And Finally background images need the element to have a defined height or content in order to be visible

Here is how the final code should look:

 #header, #nav { background: url("https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg") repeat; height: 100px; } 

 <header id="header"> <nav id="nav"> <ul></ul> </nav> </header>