• 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-color

     

    sé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-a28204421

    background-image

     

    sé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-repeat

     

    sé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 verticalement

    background-attachment

     

    sé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ée

    background-position

     

    sé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
    •bottom

    background-size
    sé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 contain

    =>Voir l'effet

    background

    Comme 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

    1
    Samedi 3 Mars 2012 à 16:56

    Hello, comment on peu changer la taille de la page en passant par le CSS ?

    2
    Samedi 3 Mars 2012 à 17:15

    Sur Ekla:

    #background {width: Xpx}

    Remplace X par la taille de ta page ;)

    3
    Samedi 3 Mars 2012 à 17:26

    Meeerci ! *o*

    4
    Yusumi Profil de Yusumi
    Mardi 19 Juin 2012 à 20:44

    Je n'arrive pas a mettre le code pour mon menu =/

    5
    Mardi 19 Juin 2012 à 20:45

    Je peux voir ton code?

    6
    Yusumi Profil de Yusumi
    Mardi 19 Juin 2012 à 20:46

    #menu1   {box-shadow10px 10px 10px #white;}

    7
    Yusumi Profil de Yusumi
    Mardi 19 Juin 2012 à 20:47

    Mince , j'ai du me tromper de page ><

     

    8
    Mardi 19 Juin 2012 à 20:47
    Presque juste ;) il faut juste que tu enlève # devant white
    9
    Yusumi Profil de Yusumi
    Mardi 19 Juin 2012 à 20:47

    Merci Nagalia ^^

    10
    Yusumi Profil de Yusumi
    Mardi 19 Juin 2012 à 20:55

    Et aussi , comment on fait pour que le flou fasse le tour du menu (si tu vois se que je veux dire) ?

    11
    Mardi 19 Juin 2012 à 20:57

    #menu1   {box-shadow: 0px 0px 10px white;}

    0px aux deux premier ;)

    12
    Yusumi Profil de Yusumi
    Mardi 19 Juin 2012 à 20:59

    Merci beaucoup !

    13
    Mercredi 25 Juillet 2012 à 11:47

    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-imageurl (http://img840.imageshack.us/img840/9535/illudernirepage.png);
        backgroung-attachmentfixed;} 
    Lorsque je met les guillemets, le lien de mon image apparait rouge >3< 

    Voila voila >3<

    14
    Mercredi 25 Juillet 2012 à 12:28

    Le problème est résolu. Désolée nagalia >3<

    15
    Dimanche 12 Août 2012 à 09:36

    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à ^^'...

    16
    Samedi 15 Décembre 2012 à 18:19

    c'est possible de coller 2 fond a la fois ???

    17
    Mardi 25 Décembre 2012 à 16:57

    svp vous pouvez me dire comment on fait pour le pied de page ??

    18
    #Directioner
    Vendredi 8 Mars 2013 à 20:59

    Sorry, mais sa a rien a voir, mais.. tu sais comment, mettre un header de + de 400ko ?

    Sans l'enregistrer en JPG.

    19
    ★etoiler★ Profil de ★etoiler★
    Jeudi 25 Juillet 2013 à 01:55

    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>_<

     

    20
    ★etoiler★ Profil de ★etoiler★
    Jeudi 25 Juillet 2013 à 01:56

    enfin que ma barre ou il y a mon compte par exemple il y aurau un fond s'il te palit,merci d'avance

    21
    Mercredi 16 Octobre 2013 à 11:44

    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

    22
    Mardi 31 Décembre 2013 à 22:36

    Moi non plus

    23
    Mercredi 1er Janvier 2014 à 01:32

    Bonne année et bonne santé ☆☆☆☆☆

    24
    Vendredi 9 Mai 2014 à 20:01

    J'arrive pas à mettre le fond

     

    25
    Vendredi 9 Mai 2014 à 20:08

    Ah non c'est bon !! Euh ça sera possible que le fond soit entier ?

    26
    Samedi 17 Mai 2014 à 00:30

    Qu'est-ce que tu appelles le fond entier ?

    27
    Samedi 17 Mai 2014 à 08:01

    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;
    }

    28
    Samedi 17 Mai 2014 à 13:17

    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;
    }

    29
    Dimanche 18 Mai 2014 à 08:35

    D'accord merci beaucoup sans ton blog je vivrai pas :O

    Mais toi au début tu arrivais à retenir tous ces codes?

    30
    Dimanche 18 Mai 2014 à 15:02

    J'ai appris en même temps que je créais ce blog. Ecrire des articles dessus m'a aidé à les retenir ;)

    31
    Dimanche 18 Mai 2014 à 18:10

    ç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

    32
    Samedi 22 Novembre 2014 à 18:53

    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 0pxurl(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 0pxurl(image3 ) no-repeat 100% -80px ,url(image4) repeat-x, url(image5 ) repeat-x, url(image6 ) repeat-x 0px 100% ;}

    33
    Lundi 2 Février 2015 à 15:41

    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"

    34
    Vendredi 13 Février 2015 à 16:38

    Coucou, si on veut mettre un fond arrière fixe, quelle est la taille idéale à choisir ? Merci :)

    35
    Vendredi 17 Avril 2015 à 22:46

    Yahallow ~ 

    Comment ont fait si on veux un fond un peu transparent ? 

    36
    Jeudi 30 Avril 2015 à 17:28

    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);
    }

    37
    Mercredi 29 Juillet 2015 à 22:50

    Salut, seriez vous comment obtenir un gris avec ce code :           backgroundrgba(80200800.3)

     

    38
    Vendredi 18 Septembre 2015 à 14:52

    Coucou Nagalia :3 J'aimerais savoir quel code utilisé pour faire comme sur ce blog, le fond de la date des articles :x Merci en avance ^^

    39
    Mercredi 17 Août 2016 à 17:27

    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. :/

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :