0

I need help with a wordpress website I'm working on currently. What I'm wanting to do is add an image border around the images. I have absolutely no idea how to do it and I'm a little bit confused! This is the code I have so far. I'm not really familiar with using images as borders so any help would be great. I have a full size border that just needs to go around the image.

.item_image {
width: 232px;
height: 170px;
padding-left: 40px;
padding-right: 40px;
border-image: url("/images/border.png") 30 30 30 30;
}

Here is a link to the image of the border Click Here

2
Contributors
5
Replies
12
Views
4 Years
Discussion Span
Last Post by JorgeM
0

So for this to work, you have to apply the style to your target images by assigning the style name to the class attribute.

For example class="item_image". Secondly, this CSS3 style is works for Firefox and Crome. For Safari and Opera, you need to add their vendor prefixes. Also, IE doesn't support it.

Finally, according to the path you provided, the border image would need to be stored in that specified folder.

0

Thanks for the reply. I have this code here

.item_image {
width:232px;
height:170px;   
padding-left:40px;
padding-right:40px;
-moz-border-image:url(images/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(images/border.png) 30 30 stretch; /* Safari */
-o-border-image:url(images/border.png) 30 30 stretch; /* Opera */
border-image:url(images/border.png) 30 30 stretch;


}

I have applied the style name to the class. My problem is I don't understand the "30 30 stretch". I want the image to appear just like the image I linked to.

Edited by kimmi_baby

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.