CODEWITHSUNDEEP
htmlcss
Qwertykey
Qwertykey

Reputation: 21

Making a background image in css won't work

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");
}

Upvotes: 0

Views: 424

Answers (3)

Bhavin Shah
Bhavin Shah

Reputation: 2482

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

Upvotes: 0

Neil Kelsey
Neil Kelsey

Reputation: 841

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/

Upvotes: 0

LTSENG01
LTSENG01

Reputation: 21

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

Upvotes: 1

Related Questions