Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Div BG Image

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #40803

    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! :)

    #114341
    Paulie_D
    Member

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

    #114342

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

    #114343
    Watson90
    Member

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

    #114344

    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?

    #114346
    Watson90
    Member

    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.

    #114349
    Paulie_D
    Member

    @Watson90 Fixed it for you.

    #114351
    Watson90
    Member

    Cheers mate, haha.

    #114352

    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?

    #114353
    Watson90
    Member

    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.

    #114354
    Paulie_D
    Member

    Perhaps you could put it Codepen instead

    #114355

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

    #114357
    ChrisP
    Participant

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

    #114359
    Paulie_D
    Member

    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/

    #114360
    Paulie_D
    Member

    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 24 total)
  • The forum ‘CSS’ is closed to new topics and replies.