CSS3 runda hörn + bakgrundsbild. Bilden "kryper" fram?

Permalänk
Medlem

CSS3 runda hörn + bakgrundsbild. Bilden "kryper" fram?

http://folderstuff.com/rund/

Bild 1 : Bara bakgrundsfärg. Ser ok ut.
Bild 2 : Inlagd img med en class ram på sig. Ser ok ut.
Bild 3 : Bakgrundsbild. Bilden "kryper" ut.

Jag anpassar mig inte efter IE, det får bli som det blir även om det blir kantigt. Men skulle gärna vilja veta om det går att få ordning på "krypet" på bild 3.
Gjorde en minisida med kodningen så ni får se vad jag menar.

Annars är snabböversikten;

.utan_bild{ -moz-border-radius:15px; border-radius:15px; border:5px solid #E1D8B9; background-color:#F8F3E3; } .bara_ramen{ -moz-border-radius:15px; border-radius:15px; border:5px solid #E1D8B9; width:590px; } .med_bild{ -moz-border-radius:15px; border-radius:15px; border:5px solid #E1D8B9; background-image: url(bakgrund.jpg); }

Den enda lösning jag kommer på nu är helt enkelt att bildredigera med ram och allt. Men vill helst undvika det då det skapar ett framtida mer jobb varje gång man vill ha en bildram.

Permalänk
Inaktiv

Jag tycker det ser bra ut (Firefox 5):

Permalänk
Medlem

Uppdaterade precis till 5an för att kolla. Och det stämmer ... oO
Funkar inte i IE (så klart ...), Chrome eller Safari? & Då FF3.
Kanske det här kommer lösa sig själv i takt med browser utvecklingen?

Permalänk
Medlem

Problemet verkar uppstå med webkit-baserade browsers. Gjorde lite snabba tester, du kan förbättra tredje bilden (den med background-image) mha background-clip:padding-box men det fungerar inte för kraftigt rundade hörn.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

https://developer.mozilla.org/en/CSS/background-clip

Kurvan är inte så tuff, så kan funka. Alla kanske man kan trixa till det. Tack för tipset, har inte satt mig in i alla CSS3 funktioner ännu och detta var ett av dem. Så tackar.