-
Les fonds
Les propriété background définissent les arrière-plan. Elles s'utilisent généralement avec des éléments de type block
background-colorsélecteur {background-color : COULEUR;}background-color permet de définir une couleur de fond. Remplacez simplement COULEUR. Si vous ne savez pas comment noter cette valeur, je vous renvois à l'article sur les couleurs:
=> http://fanstasy-graph.eklablog.net/couleur-a28204421background-imagesélecteur {background-image : url(URL_DE_L'IMAGE);}background-image permet de placer une image en arrière-plan. Par défaut, elle est placé en haut à gauche, et se répètera en mozaïque (horizontalement et verticalement) si elle est plus petite que sont conteneur.
background-repeatsélecteur {background-image : url(URL_DE_L'IMAGE);
background-repeat: repeat;
}background-repeat s'utilise avec la propriété background-image. Elle permet de définir si l'image doit se répéter si elle est plus petite que son conteneur.
Elle peut prendre les valeurs suivantes :
• repeat; valeur par défaut, l'image se répète en mozaïque
• no-repeat; l'image ne se répète pas, et laissera donc du vide si elle est plus petite que son conteneur
• repeat-x; répète horizontalement
• repeat-y; répète verticalementbackground-attachmentsélecteur {background-image : url(URL_DE_L'IMAGE);
background-attachment: fixed;
}Cette propriété s'utilise avec background-image. Elle permet de fixer l'image d'arrière plan (pour qu'elle ne bouge pas lorsque l'on descent la page)
Elle peut prendre deux valeurs.
• scroll; valeur par défaut, l'image n'est pas fixée
• fixed; l'image est fixéebackground-positionsélecteur {background-image : url(URL_DE_L'IMAGE);
background-position: Xpx Ypx;
}Cette propriété permet de positionner l'image d'arrière plan. Par défaut, celle-ci ce trouve dans le coin en haut à gauche de son conteneur. La première valeur X définit sa position horizontale et Y sa position verticale. Vous pouvez utiliser des valeur en px, em ou %
Il est également possible de la positionner avec les valeurs suivantes (plus simple, mais moins précises) : • left; à gauche
• right; à droite
• center; au center
• top; en haut
•bottombackground-sizesélecteur {background-image : url(URL_DE_L'IMAGE);
background-size: Xpx Ypx;
}Pour ne pas changer, cette propriété s'applique également à background-image. Elle permet de définir la taille de l'image d'arrière plan. X indique sa largeur et Y sa hauteur. Vous pouvez définir les valeur en px, em ou %
Vous pouvez également utiliser les valeurs cover ou containbackgroundComme cela fait beaucoup de propriété différente, nous pouvons utiliser background pour toutes les regrouper en une seule. Les valeurs sont les même que pour les propriétés vues au dessus, mais l'ordre à son importance :
sélecteur { background : #COLOR url(IMAGE) repeat fixed positionXpx positionYpx / sizeXpx sizeYpx;}Si vous ne voulez pas utiliser une des valeurs (par exemple si vous ne voulez pas de couleur de fond, laissez simplement le champs vide.
/!\ Le / entre background-position et background-size est indispensable. Si vous voulez que votre arrière plan soit positionné par défaut mais que vous voulez changer sa taille, vous devez renseiger des valeur à position (dans ce cas, left top fera l'affaire)
sélecteur { background : url(IMAGE) top left / contain;}Fonds multiples
Vous pouvez également définir plusieurs images d'arrière plan, en définissant séparément leurs position, si elles se répètent, si elles sont fixes... L'ordre à bien évidemment son importance, la première image sera l'image de premier plan, la dernière celle d'arrière plan.sélecteur {background : url( 1er plan ), url( 2eme plan), url( 3eme plan ) ; }
-
Commentaires
Et aussi , comment on fait pour que le flou fasse le tour du menu (si tu vois se que je veux dire) ?
Coucou =)
J'ai bien essayé de mettre le sélecteur .Backgroung afin de changer mon fond mais ça ne marche pas. Le poids de l'image joue t-il lorsque on entre du CSS?
Sinon, j'ai tapé exactement le même code que celui de l'article:
#background
{background-image: url (http://img840.imageshack.us/img840/9535/illudernirepage.png);
backgroung-attachment: fixed;}
Lorsque je met les guillemets, le lien de mon image apparait rouge >3<Voila voila >3<
Bonjours,
Nagalia j'ai oublier comment modifier la tailles des images de le menu des visteurs, peut-tu m'aider?
Car ça fait quelque mois que j'ai arrêter les CSS et j'ai oublier pas mal de chose, y compris le tutoriel que tu as crée à ce propos (modifier la tailles des images de le menu des visteurs) (euh, attend 2 secondes, enfaite je suis pas sure que tu en as crée un? oh puis zut! -aizaimeur- -genre-) donc voilà ^^'...
18#DirectionerVendredi 8 Mars 2013 à 20:59Sorry, mais sa a rien a voir, mais.. tu sais comment, mettre un header de + de 400ko ?
Sans l'enregistrer en JPG.
je suis perdu >_< ,très je comprend rien ,pourrai tu m'aider ? j'aimeré que les image bouge quand on met le curseur dessu et que ma barre ou il y a mon compte ect... change >_< mais je relis chaque article j'essaye ,il ne ce passe rien j'ai vraiment vraiment besoin d'aide>_<
enfin que ma barre ou il y a mon compte par exemple il y aurau un fond s'il te palit,merci d'avance
pour l'image qui ne se répète pas je n'y arrive pas
je l'ai mis avec l'url de l'image et sa marche pas
Ceux qui prenne tout l'espace du blog sans répétition. Mais tu m'avais déjà donner le code c'est celui ci :
sélecteur { background-image : url(URL);
background-size : cover;
}Le code est correct, mais il faut que tu remplace certaines parties par tes propres valeurs
sélecteur { background-image : url(URL);
background-size : cover;
}-
Jeudi 24 Août 2017 à 00:54
-
D'accord merci beaucoup sans ton blog je vivrai pas :O
Mais toi au début tu arrivais à retenir tous ces codes?
J'ai appris en même temps que je créais ce blog. Ecrire des articles dessus m'a aidé à les retenir ;)
ça doit être duuuuuuuur :O moi à peine je commence le thème je pète un cable !! Mais c'est vrai qu'a force de les utiliser on y arrive mieux. J'y arrive bien mais j'ai encore beaucouuuup de trucs à apprendre :D
Bonjour tout le monde,
j'ai une question à propos des fonds multiples, voici mon code :
#body { background :
url(image1 ) no-repeat 1% 3px, url(image2 ) repeat-x 30px 0px, url(image3 ) no-repeat 100% -80px ,url(image4) repeat-x, url(image5 ) repeat-x, url(image6 ) repeat-x ????????? ;}j'ai enlever volontairement l'adresse des images hein :')
Pour mon image 6, je voudrais la placer en bas du blog seulement on ne peut mettre que 2 valeurs après (top et left), donc, comment faire pour placer mon image 6 par rapport au bas de mon blog ?
{EDIT}
Non en fait j'ai trouver :
url(image1 ) no-repeat 1% 3px, url(image2 ) repeat-x 30px 0px, url(image3 ) no-repeat 100% -80px ,url(image4) repeat-x, url(image5 ) repeat-x, url(image6 ) repeat-x 0px 100% ;}
Il y a soucis, quand je voulais mettre le code de l'image, ça se fait ça;
"Le code CSS comporte une erreur, merci de le corriger avant d'enregistrer"
Coucou, si on veut mettre un fond arrière fixe, quelle est la taille idéale à choisir ? Merci :)
Bonjour, j'aimerai savoir comment mettre un background différent a l'une des pages du blog ? J'ai essayé ça mais ça n'a pas marché(sachant que j'ai bien mis l'id de ma page)
.page-id-2 .site-header {
background: url("URL_OF_IMAGE") no-repeat scroll center top / 1600px auto rgba(0, 0, 0, 0);
}Salut, seriez vous comment obtenir un gris avec ce code : background: rgba(80, 200, 80, 0.3);
Bonjour !
Hum, y'aurait-il un code permettant de modifier la couleur du fond (bleue par défaut) du titre de toutes les fenêtres du blog (Messagerie, contenu, configuration du thème etc..) ?
J'ai cherché partout je n'ai pas trouvé ce qu'il me fallait. :/
Ajouter un commentaire
Hello, comment on peu changer la taille de la page en passant par le CSS ?