Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Border around an image using images

    Hello everyone,

    I'd like to add a border around an image, with the border being made out of a small image that repeats itself.

    I've tried searching for a solution, but I can't seem to find something that works. I know it can be done with web-kit pretty easily, but I'd rather not use web-kit features.

    I was trying to create divs with a background-image set for each div, but I can't seem to get it to line up correctly.

    Could someone help me with this?
    I appreciate it

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    There are several types of HTML borders besides solid and dashed, some of them may do what you want. To use images, you generally need eight images, although you only need to make two, and rotate them with some image app to get the other six. You need to make one corner and a little part of a side, the side part will be stretched to make a whole side. Coding for it can be annoying but it can be automated.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New Coder
    Join Date
    Apr 2005
    Location
    Detroit, MI: Home of the body bag
    Posts
    33
    Thanks
    1
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by njfail View Post
    Hello everyone,

    I'd like to add a border around an image, with the border being made out of a small image that repeats itself.

    I've tried searching for a solution, but I can't seem to find something that works. I know it can be done with web-kit pretty easily, but I'd rather not use web-kit features.
    Well, border-image exists, but note that it's a very new and fickle property. You may have to use the webkit extension property in your stylesheet for maximum compatibility.

    Not sure exactly what the end result is supposed to look like, but you're looking for this to work across the board, browser support isn't exactly ideal. For example, IE doesn't support border-image at all. This includes the latest IE10, and it's unknown whether 11 will have it, so you may have to work around that.

    About Border Image
    http://www.w3schools.com/cssref/css3...rder-image.asp

    Border Image Support
    http://caniuse.com/border-image

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    There are several types of HTML borders besides solid and dashed, some of them may do what you want. To use images, you generally need eight images, although you only need to make two, and rotate them with some image app to get the other six. You need to make one corner and a little part of a side, the side part will be stretched to make a whole side. Coding for it can be annoying but it can be automated.
    That is exactly what I want to do. I've been trying, but I cannot code it correctly, do you have an example of code that I could use to do this?


    Quote Originally Posted by Judgment Day View Post
    Well, border-image exists, but note that it's a very new and fickle property. You may have to use the webkit extension property in your stylesheet for maximum compatibility.

    Not sure exactly what the end result is supposed to look like, but you're looking for this to work across the board, browser support isn't exactly ideal. For example, IE doesn't support border-image at all. This includes the latest IE10, and it's unknown whether 11 will have it, so you may have to work around that.

    About Border Image
    http://www.w3schools.com/cssref/css3...rder-image.asp

    Border Image Support
    http://caniuse.com/border-image
    This is what I meant when I said I did not want to use the web-kit or border-image properties, because their support is limited. I'd like to use the mutli-div method, but I am unsure how to code it correctly.

  • #5
    Junsee
    Guest
    In this case I would cheat.

    I would implement an image with padding, and set the background as the repeating image. Not to use border at all!

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Look how the are doing it here. I've seen sever types of image borders.

    http://gallery.site.hu/u/Qi/Dunkan2.JPG.html
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •