Question

I just started creating my first WP theme after doing the HTML/CSS. All good so far! Almost done in fact. One problem though:

I want each post image to have a surround around them. I could include it in the image, but I’d rather that when I post an image, it sits inside the surround.

I thought of offsetting a BG image on each post and having the first img of every post sit in that area. Anyone here know a better way to do this?

Thanks

Answer 1

Using CSS2, that sounds like the best idea. Though, I’m not sure if you need to use an offset. Just set up something like (assuming images will be of uniform size):

.imgbackground {
height: 23px;
width: 23px;
padding: 3px;
background: url(image.png);
}

Then just have the html like so:

<div class="imgbackground">
<img src="img.png">
</div>

CSS3, however, allows you to have an image as a border. As per this link: http://www.css3.info/preview/border-image/

Could be useful if you’re not overly concerned about full cross-browser compatibility.