Cannot get image to show in background

HTML & CSS
,
1

I am struggling with simply putting an image in the background of a nav div.

The HTML div starts here:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

the CSS class selector is here:

nav .navbar .navbar-inverse .navbar-fixed-top {
    background-image: url(images/desktop_header.jpg);
    background-repeat: no-repeat;
    background-position: center;

}

The full code can be seen here

I simply cannot make a background image appear in that top red nav bar. FOR THE LIFE of me!! What’s even more frustrating for me is that I it works fine in the browser but when I put in my shop-homepage.css file, IT DOES NOTHING! Any ideas?

2

The problem is your css selector.

nav .navbar .navbar-inverse .navbar-fixed-top

You only need target one element or class in this case.
Just nav {} or .navbar {} would do it.
When you have a selector with items separated by space, each item following a space is a child of the previous.
So the selector you have is targeting an element with the class .navbar-fixed-top which is nested within an element with the class .navbar-inverse, which is inside another with the class .navbar which is nested in a nav element.

<nav>
   <div class="navbar">
      <div class="navbar-inverse">
         <div class="navbar-fixed-top">This is what your selector targets</div>
      </div>
   </div>
</nav>
2 Likes
3

If you want to put the image in the element nav with a class name of navbar, do this:

nav.navbar {
     background-image: url(images/desktop_header.jpg);
     background-repeat: no-repeat;
     background-position: center;
{

You are listing the element, and all the classes that are applied to that element.

Okay. @SamA74, you beat me to it.

Also, make sure you have the correct path to the image.

1 Like
4

why would that matter? Isn’t that better to be that targeted?

5

I used your suggested code and it still will not show.

Could it be the image is too large? It’s 30 px height by 1400 long.

6

I don’t see the image, of course. So I borrowed one from placehold.it. Adding the following CSS causes the image to appear as a background image.

.navbar-inverse {
    background-color: #82001c;
    background-image: url("http://placehold.it/100x50/");
    background-repeat: repeat; /* for this demo */
}

If the incorrect selector was deleted per @SamA74 and the CSS written the way @Webmachine showed, I don’t see why your image would not be visible unless something else is overriding it.

If my notes do not lead you to a solution, please show us a link to the real site and not the BootPly thing.

3 Likes
7

Because it is incorrect syntax, which means it does not work, as you have seen.

No, targeting the wrong thing is not better than using the correct selector IMO.

3 Likes
8

Read Sam’s post again and look at the html structure you would need for your code to work. You do not have that structure.

Your CSS selector code should have been without spaces (descendant selectors).

e.g.

nav.navbar.navbar-inverse.navbar-fixed-top {etc.. }

Of course as others have said that is overkill unless you have special cases for all of those.

All of the suggestions made in this thread will work assuming you make the changes correctly and supply a valid path to the image.

4 Likes
9

You were right, my URL was wrong for the image. I was referencing it from the index file instead of from the CSS file, duh!! ::Palm plant:: thanks everyone!

1 Like
10

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