Treehouse: Grow your CSS skills. Land your dream job.

How to Use Image for Border Bottom (without using CSS3)

  • # February 21, 2010 at 10:02 am

    In another forum, someone mentioned using a div to use an image for a bottom border, as opposed to using the border-bottom-image/CSS3 method. How can I go about doing this?

    # February 21, 2010 at 12:27 pm

    I figure you could do this by making the div after whichever element you want and set the margins on the div to position it correctly.

    # February 21, 2010 at 1:12 pm

    You could set the border image as the background image then set it to start at the bottom of the div, without a repeat.

    # February 21, 2010 at 1:31 pm

    //www.css3.info/preview/border-image/

    # February 21, 2010 at 4:47 pm

    _

    # February 21, 2010 at 5:40 pm

    Sure, its

    Code:
    background:url(path/to/image.jpg) repeat-x;
    # February 21, 2010 at 9:43 pm

    _

    # February 22, 2010 at 5:06 am

    I think your code is overwriting itself.

    Code:
    background-color:#181818;
    background:url(//i764.photobucket.com/albums/xx288/tumblrlayout/shadow.png);

    should be

    Code:
    background-color:#181818;
    background-image:url(//i764.photobucket.com/albums/xx288/tumblrlayout/shadow.png);

    But I may be wrong!

    # February 22, 2010 at 5:15 pm

    _

    # February 22, 2010 at 6:11 pm

    Remove position:relative from the posts div and it works in Safari. Not sure on other browsers

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

You must be logged in to reply to this topic.