treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Image background issue

  • Hey guys I hope someone can help please. On a site that I am currently building their is a vertical line running alongside the nav. At the moment I am putting the line their using
    #side-bar { background: url(path/to/img) repeat-y; }
    the thing is at the top and bottom I have a small image that rounds the ends off nicely but I can't figure a way to do it. Does anyone have any ideas please?

    Cheers Phil
  • you could use pseudo elements :before and :after with content:' '; and a background for each
    or if its just rounding off the ends you could use border-radius

    any chance of an example on http://jsfiddle.net ??
  • Use multiple background-image:

    #side-bar {
    background-image: url(vertical.png) repeat-y top center, url(top.png) no-repeat top center, url(bot.png) no-repeat bottom center;
    }
  • @karlpcrowley I'm currently posting from my iPhone and not near my laptop.

    @hompimpa I didn't know that you can use multiple background images cheers for that.
  • @hompimpa I have tried the multiple backgrounds thing and it messed up but i don't know why.

    @karlpcrowley Here is a jsfiddle link http://jsfiddle.net/cCbHF/ if you scroll down the css you will see the section marked SIDEBAR CSS i had tried doing it wih the pseudo elements but that messed up too i have commented out the pseudo elements so the link to the images are still there.