Have an image split over three rounded boxes?

[OxfordRob]

Okay where to start explaining this?

I am trying to have a front page where it has a white background then three rounded boxes with black border and inside one image spanned across three boxes so the image gets spliced up. Does that make sense?

So 1 image with a part of the image showing in the first box then white space the next box with more of the image, white space and the third box with the last section of the image.

Can this be done without have to cut up and use three parts of the image?

I am a newbie with this so just don’t know how to start and if such a thing is possible?

Thanks for any pointers on this.

[TheDoc]

It really depends on how the image is going to be chosen.

If it’s something that isn’t going to change, you should just create one large image in Photoshop. If it’s going to by dynamically changing (say, based on blog posts) you’ll need to do some pretty fancy coding.

[OxfordRob]

It is indeed the later hence posting here. I feel it may be a bit too ambitious but wanted to check for ideas or pointers to see if it is a goer or not. I think it may well have to be a cut and shut job via photoshop however the ability to this with any image would be awesome. My intent was a slideshow of different building shots for a development site of mine.

[TheDoc]

Well, you could layer a couple divs and have the top layer use a png-24 image with transparent holes in it where you want the layer below to show through. That would be the pure-CSS way.

[Author]

Posts