Css image 100% qui ne se répète pas.

Résolu/Fermé
Signaler
-
 Légumeur -
Bonjour,
j'aimerais savoir comment étiré une image a 100% (qui ne se répète pas) et qui ne bouge pas. Tout ça en css si possible (c'est une image inséré dans le css).

Merci de votre aide parce que là je ne trouve pas!


@+



3 réponses

Messages postés
3255
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
8 février 2020
622
Bonjour,

Tu devrait essayer un truc comme ça:

body
{
   width: 100%;
   margin: 100%;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("mon image");
   background-repeat: no-repeat;

}


Sinon jette un coup d'oeil ici

0
Voici mon code :

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;

}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float:left;
width: 120px;
}

.element_menu
{
background-color: red;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}


/* Quelques effets sur les menus */


.element_menu h3
{
color: blue;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: green;
}

.element_menu a:hover
{
background-color: orange;
color: black;
}


/* Le corps de la page */

#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: #B3B3B3;
background-color: red; /* Une couleur de fond pour le corps */
background-image: url("images/motif.jpg");
width : 100%;
height: 100%;

border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
padding: 5px;
clear: both;

text-align: center;

color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;
}


celui que tu m'a donné ne fonctionne pas. Je vais jeté un coup d'oeil au site du zero de ton lien.

Mecri!
0
Messages postés
3255
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
8 février 2020
622
si tu le copie tel quel c'est normal qu'il ne fonctionnera pas. Il faut mettre le bon nom de l'image (pour toi url("images/motif.png"); ) et le mettre dans la div qui convient (moi j'ai mis body, mais toi sa sera pied_de_page par exemple)
0
Oui c'est ce que j'ai fais. Bon je réessaie
0
C'est bon merci!

@+
0