28112 sujets

CSS et mise en forme, CSS3

Border-radius ne fonctionne pas sur mon background-image

Bonjour

je souhaiterais arrondir les 4 angles d'une image. Cependant lorsque je met border-radius: 5px dans le CSS cela n'arrondit que les deux bords gauches, et pas les bords droits. Voyez plutôt :

http://www.noelshack.com/2019-38-5-1568988821-capture1.png

Voici mon code CSS 3 :

#banniere_image
{background: url(san_francisco.jpg) no-repeat;
height:200px;
width:900px;
margin-top:15px;
margin-bottom: 25px;
border-radius:5px;}

(l'image est dans un div)

A noter que quand j'enlève le no-repeat les bords droits deviennent arrondis comme souhaités cependant ce n'est pas le résultat que je veux puisque ça donne ça :

http://www.noelshack.com/2019-38-5-1568989179-capture3.png

Avez vous une idée de à quoi pourrait être du mon problème ?

Bon après-midi !

Notanoil
Salut

pourrais-tu reproduire ton problème sur Codepen ou jsfiddle ou autre ? ou alors pouvons nous tester quelque part ? cela doit venir de ton image mais c'est curieux car dans cette exemple cela fonctionne bien : http://jsfiddle.net/fbDZb/2/
Bonjour,

il n'y a pas vraiment de problème dans le sens où c'est le comportement normal (Border-radius s'applique toujours a l'élément, pas à l'image de fond).
Le résultat n'est pas très heureux car ton image de fond est simplement trop petite.
Et une des solutions pour ton image de fond s'adapte est de mettre :
background-size: cover;


Mais attention car cela peut rogner une partie de l'image et celle-ci va se retrouver étirée car trop petite de base donc moins belle que si tu l'avais découpée à la bonne taille.
Sujet clos
Aller à