- This topic is empty.
-
AuthorPosts
-
November 14, 2012 at 3:49 pm #40803Historical Forums UserParticipant
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! :)
November 14, 2012 at 3:53 pm #114341Paulie_DMemberWithout 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%;
}November 14, 2012 at 3:59 pm #114342Historical Forums UserParticipantWow thanks for the instant responce, Is there any way I can supply you with a link to take a look at?
November 14, 2012 at 4:03 pm #114343Watson90MemberDo 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%.
November 14, 2012 at 4:05 pm #114344Historical Forums UserParticipantThanks 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?
November 14, 2012 at 4:15 pm #114346Watson90MemberIs 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.
November 14, 2012 at 4:22 pm #114349November 14, 2012 at 4:25 pm #114351Watson90MemberCheers mate, haha.
November 14, 2012 at 4:27 pm #114352Historical Forums UserParticipantStill 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?
November 14, 2012 at 4:29 pm #114353Watson90MemberI 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.
November 14, 2012 at 4:29 pm #114354Paulie_DMemberPerhaps you could put it Codepen instead
November 14, 2012 at 4:31 pm #114355Historical Forums UserParticipantSorry but whats a Codepen?
Very new to this, appologies for my lack of knowlege!November 14, 2012 at 4:33 pm #114357ChrisPParticipantIf you’re floating the list items for a navigation menu, try adding `overflow: hidden;` to `#navigation`
November 14, 2012 at 4:34 pm #114359Paulie_DMemberCodepen 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.
November 14, 2012 at 4:36 pm #114360Paulie_DMemberSome 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?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.