[moos3]

I'm trying to put a piece of tape image on top of thumbnails using css. Like i have in this mock up. I was typing to use the image in the border-top for the link but couldn't figure out how to position it in the center. Ideas on how to do this with css?

[Shiro]

Border images I believe are only a part of css3, not css2, which means that they won't be supported by browsers yet (if I'm right - I may not be).

[moos3]

ok thanks

[Benalex]

Hi Moos

I'm not 100% on whether this would work in your situation as Im relatively new to CSS. But if you set the width of the containing div say like width: 200px; and then on the contained div give it the styles " margin-left: auto; margin-right: auto; width: whateverpx;"

so it would look like this given that the otside image is 200px and the inside one is 100px (Just for exampls sake, obviously replace these with the real values)

<div style="width: 200px;">
<div style="margin-left: auto; margin-right: auto; width: 100px;">
<img src="images/tape.gif" height="" width="100" alt =""/>
</div>
</div>

Hope that helps.

[twentysixtwelve]

hmm... could probably do it with some transparency. Each photo could be put in a container div with a separate bg image for each photo, then the same tape image applied over the top with CSS and a transparency applied, again through CSS.

Its a bit messy.... but would probably work.

An example is here : BBC Wales - Nature

Look at the large photo, with the dark overlay. The photo could be your photo, the overlay is the tape....

[LukeV]

Yeh I can't recommend you do that it would be terribly inefficient once you have a full gallery. It's forgivable if it's just one image but a full gallery...no.

Anyways what's cool about that is that you can create multiple images of the type that differ from one another in length or shape and then use php to randomize the tape image on each picture. I think it will bring out the effect in a much more realistic way.

[bluesage]

absolute positioned element on top of your image ?