The Background Image wouldn't show

HTML & CSS
1

Good evening…
I’m a newbie in web designing. I tried to exchange the background color for image using external CSS, it doesn’t work. However it works in embedded. What can be done please?

2

Can you provide a link to where the problem is occurring, or embed the HTML and CSS you’re using here?

3 
#navigation {
	width: 180px;  
	height: 484px;
	background: #7da5d8 url(dec2.jpg);
}

for this div content

<div id="navigation">
    <ul><li><a href="index1.html">Home</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="gallery.html">Image Gallery</a></li>
    </ul>
  </div>
4

There is nothing in that code that would not have the background image show.

The only thing I would say, is this: Is your dec2.jpg in the same folder as your CSS? Because that’s where it’s looking. Say your stylesheet is here: “/styles/main.css”. And you call dec2.jpg like that. It’s looking for dec2.jpg in “/styles/dec2.jpg”. Make sense? That’s just my guess.

5

Yes, it’s in the same folder

6

I have tried that too, it’s not working. Perhaps i should just use embedded css but i just can’t wonder what is it. I have checked it all over.

7

Unless you can get us an example online, we can do little to help you from here :frowning: .

8

I know it seems basic, but you’ve not got any uppercase characters in your jpeg file name, or jpeg instead of jpg on the end of it?

9

And if you’re certain the path and spelling are correct, does the image load OK if you go directly to it in your browser?

10

No, I don’t. Tried another images too but wouldn’t work.

11

Yes it does

12

is it alright if i post the full css here?

13

Try this CSS - curious -

#navigation {
	width: 180px;  
	height: 484px;
	background: #7da5d8 url(https://placeholdit.imgix.net/~text?txtsize=24&txt=256%C3%97256&w=256&h=256);
}
14

I’d rather you go to codepen and get a “broken” demo for us.

15

alright will try that now but please, where’s codepen? I’m new here

16

codepen.io

17

Sorry, I forgot you had mentioned you were a noobie in web development. Codepen is a great resource to put up quick demos (broken or not). Please get your demo recreated at codepen.io and we can go from there.

If you have a LIVE website, that is even better!

18

Thanks Sir, the snippet you gave me thus change the background, but i don’t know how it can help me sir

19

Ok please do the following.

Narrow down your page to the bare minimum you can. If the issue is in the navigation element (which your code references), please remove e verything else on the page. Header, footer, sidebars, etc. Make it so the only thing between <body> </body> is the navigation element.

Then please post the FULL HTML and CSS into this thread. Please note that the issue should still be present.

Heck, actually if you just wanna zip everything up, and post it here, please do so. I really do believe your file structure is just messed up.

If you wanna try this, before doing all that, please do so. Put everything in one folder. The stylesheet, image, and HTML file. That should make it PLAIN as day what the issue is (you’ll need to update your <link> to this new destination.

20

Alright sir, thanks. I’ll surely do that.