Div BG Image

[Historical Forums User]

Could someone please explain how to get an image as a background for my navigation bar, Using CSS.

I have my style sheet correctly linked as i’ve tested that, however I cant link an image with my Div tag. Is this CSS correct?

#navigation {
background-image:url(images/blue1.png);
width: 100%;
}

I’d like to have it spanning the whole width of the page and be scale-able, does the

width:100%;

attribute Allow this?

Thanks in advance saviours of the internet! :)

[Paulie_D]

Without a link it’s hard to say but my guess is that the image isn’t being referenced correctly. Try this:

#navigation {
background-image:url(../images/blue1.png);
width: 100%;
}

[Historical Forums User]

Wow thanks for the instant responce, Is there any way I can supply you with a link to take a look at?

[Watson90]

Do you not have to specify at least a height for this to take effect? And I think @Paulie_D is correct with his suggestion. Also you won’t need to specify a width of 100% as it defaults to 100%.

[Historical Forums User]

Thanks for the advice @Watson90 I’ll just try that now, Is there anyway i can show you exactly what i mean, I don’t feel I explained it very well?

[Watson90]

Is the website live? Maybe give us a link to it.

Although I think we understand your question.

#navigation {
background: url(../images/blue.png) repeat-x;
height: 50px: /* The height of the image you’re using */
}

I’m on my phone and selecting the text for code messes up badly. Apologies.

[Paulie_D]

@Watson90 Fixed it for you.

[Watson90]

Cheers mate, haha.

[Historical Forums User]

Still nothing, And no its not live, Im only just starting to create it tonight and came across this problem, Its driving me mad! Its my first website so I guess I should expect many more, Thanks for your help so far its much appreciated. Could we prehaps skype sometime so you can see whats going on at my end better?

[Watson90]

I don’t do Skype personally. Maybe another member does.

But if you just put your code in a new pen and send us the link it will be a lot easier. It could be your markup.

[Paulie_D]

Perhaps you could put it Codepen instead

[Historical Forums User]

Sorry but whats a Codepen?
Very new to this, appologies for my lack of knowlege!

[ChrisP]

If you’re floating the list items for a navigation menu, try adding `overflow: hidden;` to `#navigation`

[Paulie_D]

Codepen is a site that allows you to put HTML & CSS into separate areas. It live updates and then you can link to it to let us play.

http://codepen.io/pen/

[Paulie_D]

Some basic questions:

How is you website folder set up?

Does it have a main folder holding…

index.html (or whatever you page is)

images folder

css folder

scripts folder

or does it have something else?

[Author]

Posts