Grow your CSS skills. Land your dream job.

Image background issue

  • # February 25, 2012 at 11:05 am

    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

    # February 25, 2012 at 11:08 am

    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 ??

    # February 25, 2012 at 11:12 am

    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;
    }
    # February 25, 2012 at 11:13 am

    @hompimpa +1

    # February 25, 2012 at 11:25 am

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

    # February 25, 2012 at 12:50 pm

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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