Forums

AdamHodgson

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%;
}

AdamHodgson

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

AdamHodgson

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.

AdamHodgson

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

AdamHodgson

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?

AdamHodgson

Thanks guys @Paulie_D + @Watson90 + @ChrisP

Here's a code pen link : http://codepen.io/anon/pen/aqlhG

Realised I told you the wrong images, Its Blue.png for the majority of the site (body) And bg.jpg for the header section

Hope this is all okay?

Watson90

I can see a few things straight away, you haven't closed your UL in your navigation and also your style declaration isn't closed properly.

ChrisP

Also, you can't specify background-position in background-image, you can either do shorthand background or use both position and image separately.

AdamHodgson

Thank you these should now be solved, Still hasn't solved the problem though, In answer to @Paulie_D I have my index.html file saved in a directory along with a style.css file. Then In the same directory i have my images folder complete with 2 images blue.png and bg.jpg

Thanks again guys, appreciate your commitment :)

Watson90

@ChrisP - where is background position on his pen?

Watson90

If that's the case @AdamHodgson then you will need to add ../ to your image path

End the CSS path with />

ChrisP

I thought I saw background-image: url(/images/bg.png) repeat-x; in #navigation, but now that I follow the link again, I may have been seeing things.

Paulie_D

background-image: url(/images/bg.png) repeat-x;

should be

background: url(/images/bg.png) repeat-x;

AdamHodgson

Still nothing guys sorry, I'm going to have to go offline just now, I'll be sure to pick up tomorow and will be even more determined to get it sorted.

Thanks everyone,

Hulkster

@AdamHodgson, try this now: http://codepen.io/anon/pen/xfztL

If that is NOT working, then check your file extension. This code is working, if the you linked the images right.

treehouse : what would you like to learn today?

Forums

Div BG Image