[CSS] background-image over border heen

[Intru]

Ik heb een <div>'je met een border van 1px breed.
Nu wil ik een klein achtergrond plaatje zo in de rechter bovenhoek plaatsen, dat deze de border net overlapt. Dit zou dus het effect geven van een meer afgeronde hoek.

code:

background: #284E8E url(images/bar_top.jpg) no-repeat;
background-position: top right;

Dit werkt dus niet.
Als ik vanaf deze positie het plaatje 1px omhoog en naar rechts schuif, gaat hij onder de border zitten, of eigenlijk buiten de div waardoor het niet meer zichbaar is.

Wie o wie heeft de oplossing ?

[Verwijderd]

Ik denk dat je stiekem het antwoord wel weet. De border zit buiten de padding area, de achtergrond zit in de padding area. Zo zit het box model in elkaar.

[Verwijderd]

Niet helemaal,

Background images horen wel degelijk in de border te vallen, evenals een background color. Internet explorer doet dit echter verkeerd.

Alleen verder is het niet mogelijk om een achtergrondplaatje over een border te zetten, hij blijft erachter komen

edit: dacht ik tenminste, effe een controle op w3c geeft Cheatah toch gelijk:
http://www.w3.org/TR/REC-...opdef-background-position

[ Voor 23% gewijzigd door Verwijderd op 19-07-2004 21:33 ]

[Intru]

mjah, klopt. Het is ook vast wel te verhelpen door niet een achtergrond plaatje te nemen, maar een gewone, en die er netjes over te 'plakken'.
Ik vind dit alleen wel minder fijn, en zou het ook het liefste binnen de .css houden.

Als het op geen andere manier kan, moet ik dr maar een gewoon plaatje van maken.

[Verwijderd]

Misschien helpt dit artikel je op weg. Of je wacht natuurlijk even op een fatsoenlijke CSS3 ondersteuning met border-radius properties. Cya in 2009

[ Voor 42% gewijzigd door Verwijderd op 19-07-2004 21:35 ]

[Verwijderd]

Verwijderd schreef op 19 juli 2004 @ 21:27:

edit: dacht ik tenminste, effe een controle op w3c geeft Cheatah toch gelijk:
http://www.w3.org/TR/REC-...opdef-background-position

Je hebt wel een beetje gelijk hoor, in CSS 2 revisie 1 is dit inderdaad gewijzigd. Het probleem van CSS is dat er aanvankelijk te weinig mogelijkheden waren vastgelegd, waardoor dit soort vervelende situaties ontstaan.

Verwijderd schreef op 19 juli 2004 @ 21:28:
Misschien helpt dit artikel je op weg.

Dat is HTML abuse, maar goed, het werkt inderdaad wel.

[ Voor 22% gewijzigd door Verwijderd op 19-07-2004 21:37 ]

[Verwijderd]

ik meen me iets te herinneren dat door een dotted of dashed border de background-color en -image heen moeten schijnen, maar ik kan er dus even helemaal niks over terugvinden

edit aha ik zat css 2 documenten te lezen (waarom linked de ff toolbar daarheen), in css 2.1 documenten staat idd dat de background ook in de borderarea hoort te werken, wat ie dus niet doet

"background" refers to the background of the content, padding and border areas

[ Voor 47% gewijzigd door Verwijderd op 19-07-2004 21:47 ]

[Verwijderd]

Verwijderd schreef op 19 juli 2004 @ 21:38:
ik meen me iets te herinneren dat door een dotted of dashed border de background-color en -image heen moeten schijnen, maar ik kan er dus even helemaal niks over terugvinden

http://www.w3.org/TR/CSS21/box.html#mpb-examples

[Intru]

de methode in dat artikel is misschien wel de beste manier, ookal is het nog niet écht netjes.
Maar wachten op CSS3 (die dan ook nog eens fatsoenlijk wordt ondersteund door de meeste browsers) lijkt me ook niet echt de moeite waard

Ok, ik heb het toch maar op een andere manier opgelost.
De div heeft een vaste breedte, en ik heb dus maar gewoon 1 background-image gemaakt voor de bovenste div. Hierdoor heeft ie een nep-bordertje.
Ik had het liever wat netter gehouden, maar zo werkt het ook zonder al te veel gedoe.

[ Voor 46% gewijzigd door Intru op 19-07-2004 22:09 ]