Bonjour,

Je commence à étudier le HTML / CSS en suivant un tutoriel qui nous fait coder un site de A à Z. Je parts donc de ce tutoriel pour ensuite modifier le tout "à ma sauce".

Afin d'insérer "l'image" principal du site internet je suis passé par CSS. C'est un peu l'image de présentation du site avec un peu de texte par dessus.

#main-image
{
	height: 580px;
	background: url('main.jpg') center no-repeat;
}

Déja, est-ce la bonne méthode ? 

Ensuite j'aimerais quelques peu arrondir les bords de cette image, j'ai essayé avec la même propriété que pour un bouton, le bon vieux "border-radius" mais ça ne change rien.

Est-il possible de faire cette manipulation en CSS ? 

Merci de votre aide.

Bonjour,

Après avoir fait pas mal de test, j'ai compris ce qui n'allait pas.

En fait le border-radius marche très bien, met un background-color:red et tu vas vite comprendre que ça marche finalement. Forcément vu que tu as mit l'image au centre du bloc, alors le border-radius marche pour les côté du bloc et ne prends pas en compte l'image.

Pour y remédier, faut mettre un width, mais si tu fais ça, alors l'image ne sera plus au centre et le center marchera cette fois-ci pour l'intérieur de l'image donc fait bien attention.

Pour résoudre finalement ce problème de center, faut que tu mettes un margin:auto; pour le centrer et le tour est joué.

Un exemple de code pour te donner une idée :

    background: url('moi.jpg') center no-repeat;
    border-radius: 10px;
    height: 500px;
    width: 50%;
    margin: auto;

-
Edité par N.Parvedy 5 juin 2018 à 9:43:15