Having a hard time with CSS border images...

Discussion in 'CSS' started by emailarron, Oct 31, 2012.

0
  1. #1
    I am trying to create a border using in image...
    but I am having a hard time getting it to align right...

    Here is the image
    http://i1356.photobucket.com/albums/q732/Arron_Rasmussen/stamp.png

    I am using this CSS

    border: 30px;
    border-image-source: url(images/stamp.png);
    border-image-slice: 30 30 30 30;
    border-image-width: 30 30 30 30;

    An that work's ok, except that the images are squished...
    so the part that I am having trouble with,

    is that the top, left, right and bottom images should run a longer length, and then repeat, right now they are stretching as if they were 30px

    then i need to size the top left, top right, bottom left and bottom right corners, so they are all a good looking size..

    and this is where i get confused... CSS is not my strong point,
    anyone with tips?
    much appreciated :)
     
    emailarron, Oct 31, 2012 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    What you are looking for is border-image-repeat -- The valid values for said property being:

    repeat: repeats, doesn't care about making the edges line up.

    stretch: the default, stretches to fit

    round: repeats, but does a wee bit of stretching to make the edges line up.

    so border-image-repeat:repeat; is likely what you're looking for.
     
    deathshadow, Nov 1, 2012 IP