0

I'm using the CSS3 border-image property to images that will be of various sizes. I'm using in-line css for the time being.

I want to make it so that the border-image has priority over the main image, so that if the image is slightly bigger than anticipated, the frame appears in front of the image.

Below is my code:

<img alt="Thumb_img_0129" src="/thumb_IMG_0129.jpg" 
style='border-width:15px; padding:10px 10px; 
-moz-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
-webkit-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
-o-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
border-image:url("/images/fancy-frame.jpg") 30 30 stretch;' />

I know it's a bit clunky being in-line css...but have it this way for the time being...

Thank you!

user749798
  • 5,210
  • 10
  • 51
  • 85
  • I tried z-postiion and post:relative, but neither seem to help. The main image (Thumb_img) seems to partially overlap the border...and I want the border to have priority. – user749798 May 16 '12 at 14:15

1 Answers1

0

Try to put the border around a wrapping DIV. For example:

<div style="background-image: url('/thumb_IMG_0129.jpg'); background-repeat: no-repeat;">
     <div style='border-width:15px; padding:10px 10px; 
          -moz-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
          -webkit-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
          -o-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
          border-image:url("/images/fancy-frame.jpg") 30 30 stretch;'>

          <img src='/thumb_IMG_0129.jpg' style='opacity: 0;'/>

      </div>
</div>

Explanation: The first wrapping DIV got the image as background. Over that, the secon DIV paints the border. Last but not least, the image inside both of them, but invisible, to automatically scale the DIVs to the size of the image.

Michael Seibt
  • 1,346
  • 9
  • 13
  • I'm not totally sure about that. Maybe needs some improvement. – Michael Seibt May 16 '12 at 15:14
  • Unfortunately, when doing this, thumb repeats and seems to appear only partially in the frame. Is there a way to make background image not repeat and instead stretch to the size of the div? – user749798 May 18 '12 at 03:00