[CSS]Afbeeldingen met vaste hoeken

[mycosis]

Ik zoek een oplossing voor het volgende:

Ik wil steeds terugkerende hoeken over een afbeelding.


Die blauwe hoekjes wil ik in CSS generen, zodat ik niet ieder beeld hoef te photoshoppen.
Ik de hoekjes gemaakt als transparante PNG. (beeldhoekLB.png & beeldhoekRO.png)

Weet iemand hoe ik dit moet doen? Ik kan nergens werkende oplossing vinden

[benoni]

Zoiets (niet getest):

HTML:

<div class="foto">
    <img ... />
    <div class="foto_tip1"></div>
    <div class="foto_tip2"></div>
</div>

Cascading Stylesheet:

.foto {
    position: relative;
}

.foto div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

.foto_tip1 {
    background-image: url("../images/linksboven.png");
    background-position: top left;
}

.foto_tip2 {
    background-image: url("../images/rechtsonder.png");
    background-position: bottom right;
}

[Zeebonk]

Je zou kunnen proberen een div om de afbeeldingen te gooien. En in die div dan niet alleen het plaatje, maar ook twee absolute geplaatste divjes met die hoekjes als achtergrond afbeelding.

Ik kan dat zelf nu niet testen, zit op mn werk

[TERW_DAN]

Je kunt het plaatje toch zelf ook gewoon positioneren. Hoef je niet per se een DIV voor te gebruiken lijkt mij.

[Zeebonk]

@Terw_Dan:
Bedoel je de div om de afbeelding zelf heen, of de div voor die hoekjes? Want om die afbeelding zelf heb je er natuurlijk een nodig om die hoekjes in te kunnen plaatsen.

Die hoekjes zou ik wel in een div doen als achtergrond afbeelding, en niet als losse img's. Op deze manier zijn de hoekjes onderdeel van de opmaak en niet van de content.

[mycosis]

benoni schreef op donderdag 27 november 2008 @ 10:05:
Zoiets (niet getest):

HTML:

<div class="foto">
    <img ... />
    <div class="foto_tip1"></div>
    <div class="foto_tip2"></div>
</div>

Cascading Stylesheet:

.foto {
    position: relative;
}

.foto div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

.foto_tip1 {
    background-image: url("../images/linksboven.png");
    background-position: top left;
}

.foto_tip2 {
    background-image: url("../images/rechtsonder.png");
    background-position: bottom right;
}

Dank u! werkt perfect!

[ Voor 8% gewijzigd door mycosis op 27-11-2008 14:43 ]

[TERW_DAN]

evt de z-index aanpassen, zodat je zeker weet dat ze boven het plaatje worden getoond.