Grow your CSS skills. Land your dream job.

Div BG Image

  • # November 14, 2012 at 3:49 pm

    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

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

    # November 14, 2012 at 3:59 pm

    Wow 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

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

    # November 14, 2012 at 4:05 pm

    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?

    # November 14, 2012 at 4:15 pm

    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.

    # November 14, 2012 at 4:22 pm

    @Watson90 Fixed it for you.

    # November 14, 2012 at 4:25 pm

    Cheers mate, haha.

    # November 14, 2012 at 4:27 pm

    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?

    # November 14, 2012 at 4:29 pm

    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.

    # November 14, 2012 at 4:29 pm

    Perhaps you could put it Codepen instead

    # November 14, 2012 at 4:31 pm

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

    # November 14, 2012 at 4:33 pm

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

    # November 14, 2012 at 4:34 pm

    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/

    # November 14, 2012 at 4:36 pm

    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?

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".