Making a background image in css won't work

Question

I am making a website in HTML and CSS and I am trying to include and image, but the image won't appear. This is what I have done:

The HTML part:

<nav>
<ul>
<div class = "top-links">
<li><a href="index.html">Home page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="our songs.html">Our songs</a></li>
<li><a href="see us play.html">See us play</a></li>
<li><a href="Contact us.html">Contact us</a></li>
<li><a href="merchandise.html">Merchandise</a></li>
<li><a href="playing a concert.html">Playing a concert</a></li>
</div>
</ul>
</nav>

And the CSS part:

.top-links {
border-style: hidden; 
font-weight: 300;
text-align: center;
line-height: 1.5em;
background-image: url("images/cricket bat and ball.jpg");
}

Your HTML is invalid. You can't have a <div> as a child of a <ul>. I'd also recommend removing the spaces in your image's file name, possibly replacing them with underscores or dashes. — j08691
– j08691, Commented May 31, 2017 at 15:52
I have a folder called website, then inside it I have all the HTML files and two other folders one for images, the other for CSS — Qwertykey
– Qwertykey, Commented May 31, 2017 at 15:55
Spaces in an images name still work I tried adding another image elsewhere that had spaces in its name and it was fine — Qwertykey
– Qwertykey, Commented May 31, 2017 at 15:56
What does your browser's console say? Do you see any errors in DevTools? — IiroP
– IiroP, Commented May 31, 2017 at 15:56

LTSENG01 · Accepted Answer · 2017-05-31 15:56:12Z

1

It may be because the image URL in the CSS has spaces in it. Try renaming the image to something without spaces.

answered May 31, 2017 at 15:56

LTSENG01

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neil Kelsey · Accepted Answer · 2017-05-31 16:03:19Z

0

I saw a few errors with your code, the first was an issue with this line

<div class = "top-links">

You shouldn't have the spaces between the equals sign - this may work with some browsers but isn't good practise so it may have turned out that your styling was simply not being picked up. So I changed it to this

<div class="top-links">

Next problem was similar but this time with your CSS

background-image: url("images/cricket bat and ball.jpg");

You can't have spaces in an image URL ... well you can but again it leaves you open to all sorts of issues and is again considered bad practise, I would rename your image something like cricket-bat-and-ball.jpg so I changed that line to this

background-image: url("images/cricket-bat-and-ball.jpg");

And that should fix your errors - I put the whole thing together in to a fiddle to test and it seems to work fine, I replaced the image URL with a placeholder image, the background image is now being picked up

https://jsfiddle.net/xjerfnLd/

answered May 31, 2017 at 16:03

Neil Kelsey

8416 gold badges14 silver badges34 bronze badges

3 Comments

Qwertykey Over a year ago

this still doesn't work... I had look at the developer editor thing you get online and in console there is the error file not found

Neil Kelsey Over a year ago

Sounds like the link to your file is incorrect - this could be because it has spaces in the image name as I explained, did you try renaming your image file?

Neil Kelsey Over a year ago

Firstly try replacing your background image line of CSS with mine from the fiddle This should resemble the fiddle - this proves your CSS is correct and your HTML is correct, the only thing that can be wrong is the image - either the link to it or the image itself, try opening the image in Chrome or Windows Explorer or Finder if you're on a Mac - does the image work? Does the URL match what you have in your code?

Bhavin Shah · Accepted Answer · 2017-05-31 16:14:04Z

.top-links {
border-style: hidden; 
font-weight: 300;
text-align: center;
line-height: 1.5em;
background-image: url("http://i.imgur.com/uYImr7U.jpg");
/*background-image: url("images/cricket_bat_and_ball.jpg");*/
background-size:cover;
background-position: center center;
}

<nav>
<div class = "top-links">
<ul>

<li><a href="index.html">Home page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="our songs.html">Our songs</a></li>
<li><a href="see us play.html">See us play</a></li>
<li><a href="Contact us.html">Contact us</a></li>
<li><a href="merchandise.html">Merchandise</a></li>
<li><a href="playing a concert.html">Playing a concert</a></li>
</ul>
</div>
</nav>

It works fine for me.

Kindly check the image path that you have given. Is it correct?

Hope this helps.

Collectives™ on Stack Overflow

Making a background image in css won't work

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related