Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et comentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

IMAGES DE FOND EN CSS

Ajouter une image de fond

Pour ajouter une image de fond derrière un élément nous allons cette fois-ci utiliser la propriété background-image.

Cette propriété va prendre comme valeur l’adresse de l’image que l’on souhaite afficher.

Afin d’observer en pratique comment cela fonctionne, je vous invite à placer une image dans le même dossier que vos pages HTML et CSS. Donnez lui par exemple le nom « mon-image.png ».

On commence par placer une image dans le même dossier que notre page HTML

Ensuite, nous allons utiliser la propriété background-image afin de placer cette image en fond de notre page web. Pensez à prendre une image d’une taille raisonnable afin d’avoir un bon affichage pour l’exemple.

On utilise une image de fond pour notre page web

On utilise la propriété background-image

Grâce à background-image, nous avons incrusté une image de fond dans notre page web

Comme vous le voyez, il ne suffit pas simplement d’indiquer le nom de l’image mais il faut avant indiquer le mot clef « url » puis ensuite indiquer le chemin de l’image.

Nous utilisons ici encore une fois une adresse relative, pensez donc à adapter la valeur de l'url si votre image se trouve dans un dossier différent de votre page de code.

Vous pouvez également utiliser une image déjà présente sur le web en fond en précisant cette fois-ci une adresse absolue (l’url complète de l’image) en valeur de la propriété background-image. Cependant, cela n’est pas recommandé car si le site web supprime ou modifie le nom ou l’emplacement de l’image votre fond ne s’affichera plus.

On remarque également que votre image de fond, si elle est plus petite que l’élément auquel on l’applique, va se répéter par défaut pour « remplir » tout le fond de l’élément. Pas d’inquiétude, nous allons apprendre à changer ce comportement immédiatement.

Redimensionner une image de fond en CSS

Comme nous l’avons vu précédemment dans ce cours, il est préférable de redimensionner une image avant de la mettre sur son serveur, afin de gagner en performance.

Cependant, il arrive que nous n’ayons pas le choix et que nous devions redimensionner une image à postériori. Dans ces cas là, vous pouvez utiliser la propriété background-size.

Cette propriété va utiliser deux valeurs : la nouvelle largeur de votre image et sa nouvelle hauteur.

Vous pouvez indiquer des valeurs absolues ou relatives. En cas de valeurs relatives, faites bien attention : l’image de fond occupera un pourcentage de la taille de l’élément auquel elle est appliquée, et non pas un pourcentage de sa taille originale. Dans ce cas là, il vaut mieux ne préciser qu’une valeur (la largeur de l’image).

On utilise background-size pour ajuster la taille de notre image de fond

En précisant une valeur relative à background-size, l’image occupe un pourcentage de l’élément HTML body

Gérer la répétition d’une image de fond en CSS

On va pouvoir indiquer si l’on veut qu’une image de fond se répète verticalement, horizontalement, dans les deux sens ou pas du tout grâce à la propriété CSS background-repeat.

On va généralement choisir parmi les quatre valeurs suivantes de background-repeat :

  • repeat (valeur par défaut) : l’image se répète horizontalement et verticalement ;
  • repeat-x : l’image va se répéter horizontalement seulement ;
  • repeat-y : l’image va se répéter verticalement seulement ;
  • no-repeat : l’image ne se répétera pas.

Voyons immédiatement deux exemples d’utilisation de cette propriété avec notre image de fond, en commençant avec la valeur repeat-x (répétition horizontale) :

Avec background-repeat : repeat-x notre image ne se répétera qu’horizontalement

Notre image se répète bien à l’horizontal grâce à background repeat

Avec la valeur no-repeat, notre image ne se répétera plus du tout :

Avec la valeur no-repeat, notre image de fond ne se répète plus

Notre image de fond ne s’affiche plus qu’une fois

Fixer ou faire défiler le fond en CSS

On va pouvoir choisir de « fixer » notre image de fond ou de la faire défiler en même temps qu’un utilisateur va descendre dans la page grâce à la propriété CSS background-attachment.

Cette propriété peut prendre deux valeurs différentes : fixed (pour fixer le fond) et scroll (valeur par défaut).

Utilisation de background-attachment

Background-attachment permet de fixer une image

Notre image de fond est fixée en haut à gauche de notre page web

Ici, l’image reste fixée en haut à gauche de l’écran même lorsqu’on descend dans la page.

Modifier la position d’une image de fond en CSS

On va encore pouvoir modifier la position d’une image de fond en CSS grâce à la propriété CSS background-position.

Cette propriété est généralement utilisée avec background-repeat:no-repeat et lorsque l’on souhaite utiliser plusieurs images de fond.

Nous allons apprendre à placer plusieurs images de fond par la suite, pour le moment concentrons nous sur la position de notre image seulement.

La propriété background-position accepte toutes sortes de valeurs. Généralement, nous utiliserons soit deux mots clefs (comme « top right» par exemple, pour placer l’image en haut à droite), soit deux valeurs en pixels pour régler l’écart de l’image par rapport au coin supérieur gauche de l’élément auquel elle est appliquée.

Voyons à nouveau deux exemples, en commençant avec la valeur top right par exemple :

On place notre image de fond en haut à droite grâce à background-position : top right

Notre image de fond se trouve en haut à droite dans notre page

Pour un positionnement plus précis, on peut également utiliser des valeurs en pixels :

On utilise background-position avec des valeurs en pixels

Notre image de fond à été décalée vers le bas et vers la droite

Ajouter plusieurs images de fond en CSS

On peut finalement ajouter plusieurs images de fond à un même élément HTML.

Pour faire cela, il va suffire de séparer les déclarations pour chaque image par une virgule pour chacune de nos propriétés.

Imaginons par exemple que l’on souhaite attacher deux images de fond à notre élément body. Je commence pour cela par placer une deuxième image (que j’appelle « image-2.png ») dans le même dossier.

On veut que notre première image soit redimensionnée à 25% de l’élément body en largeur et à 50% pour la deuxième. De même, on souhaite avoir notre première image en haut à gauche et notre deuxième en haut à droite. On va donc s’y prendre comme cela :

On affiche plusieurs images de fond en CSS sur notre élément HTML body

Nous avons bien placé deux images de fond : une à gacuhe, une à droite

Comme vous pouvez le voir, nous avons à chaque fois précisé deux valeurs pour chaque propriété relative au fond, en les séparant par une virgule. La première valeur de chaque propriété sera utilisée pour la première image déclarée, tandis que la seconde affectera la deuxième image.

Notez que si nous n’avions pas précisé de valeur pour le background-position pour nos images de fond, nos deux images auraient été l’une sur l’autre. Par défaut, c’est la première image déclarée qui se retrouve au dessus de l’autre. Faîtes donc bien attention à l’ordre des déclarations !

Sans background-position, nos deux images de fond se retrouvent l’une sur l’autre

Nos deux images de fond sont à la même position

Chapitre précédent

Chapitre suivant