BACKGROUND : DU FOND MIS EN FORME !

BACKGROUND : DU FOND MIS
EN FORME !
background-image : url ("img/image.png"); (image de fond)
background-attachment
background-attachment : fixed; /* le fond reste fixe quand la page défile*/
background-attachment : scroll; /* le fond défile avec la page (par défaut) */
background-attachment : local, /* le fond défile quand l'élément qui la contient
scroll, pas quand la page défile(CSS3) */
background-attachment : scroll,fixed; /* accepte plusieurs valeurs séparées pour
une virgule pour les images de fond multiples(CSS3) */
background-repeat : no-repeat ; /* image unique sur la page */
background-repeat : repeat-x ; /* répété sur la première ligne horizontalement */
background-repeat : repeat-y ; /* répété sur la première colonne verticalement */
background-repeat : repeat; /*répété horizontalement et verticalement, valeur par
défaut */
background-repeat : repeat-x, no-repeat; /* accepte plusieurs valeurs séparées pour
une virgule pour les images de fond multiples(CSS3) */
background-position : position de l’image par rapport au coin supérieur gauche de
la page.
background-position : 30px 50px ; (gauche haut)
background-position : right/left/center top/bottom;
background-position : right bottom, left top;/* accepte plusieurs valeurs séparées
pour une virgule pour les images de fond multiples(CSS3) */
BACKGROUND PAGE
Plusieurs niveaux de fond :
- La balise body peut être utilisée pour placer un background, c'est l'élément
ancêtre de toute balise.
- Une div de largeur et hauteur du body peut servir à placer une seconde couche de
background.
Voir exemple
Autre exemple(One-page)
BACKGROUND BLOCK
Nous avions jusqu'alors utilisé le background-color, le border, le shadow pour
donner du volume ou du caractère à nos blocs (div, section, article..).
Mais tout élément bloc peut avoir un background image.
BACKGROUND CSS3
background-size spécifie la taille de l'image dans l'arrière plan.
background-size: x y;
x détermine la dimension horizontale (pixels, em, auto, pourcentage %, etc.),
y détermine la dimension verticale (pixels, em, auto, pourcentage %, etc.)
Valeurs possibles:
Dimensions : par exemple "px" ou "%" : précise la hauteur ou la largeur de l'image.
"cover" : forcera à couvrir toute la surface sans déformer l'image. Quitte à la rogner.
"contain" : forcera l'image à ne pas dépasser de l'élément sans la déformer.
Inconvénient :
Ne fonctionne pas sur Internet Explorer <= 8 et les anciennes versions des navigateurs
tels que Firefox 3.0.
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
Plusieurs images dans un arrière-plan : background multiple
Le résultat est similaire à des calques : l'image la plus proche de la propriété (la première
énumérée) sera l'image de premier plan.
Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan.
background-image: url("image1"), url("image2");
background-position: x y, x y;
background-repeat: no-repeat;
background:url(img/01.jpg) no-repeat right top, url(02/img/galerie/04.jpg) no-repeat;
width:269px; height:180px;
Autre exemple de backgrounds multiples
LES DEGRADES EN CSS3
Deux nouvelles propriétés permettent de réaliser et gérer des arrière-plans de
teintes dégradées.
Il s'agit de linear-gradient pour les dégradés linéaires et radial-gradient pour les
dégradés radiaux.
SYNTAXE POUR LINEAR-GRADIENT
Les dégradés linéaires empruntent la valeur-fonction linear-gradient() de la propriété
background-image (ou background en raccourci).
Il convient de préciser au minimum le point d'arrivée du dégradé ainsi que deux
couleurs (ou plus).
background : linear-gradient(x y, couleur1, couleur2, couleurN)
Valeurs possibles
x et/ou y définissent la direction du dégradé.
Exemple : "to left bottom" ou "to right",
couleur : le nom, la valeur hexadécimal ou la valeur RGBa
Exemple : Dégradé du vert au blanc transparent en diagonal du haut gauche vers le bas
droite
background: linear-gradient(to right bottom, green, rgba(0,255,0,0));
SYNTAXE POUR LINEAR-GRADIENT
Les dégradés radiaux sont réalisables à l'aide de la valeur-fonction radial-gradient().
Les dégradé radiaux sont définis par leur origine, l'angle, l'orientation, et leur type,
circle ou ellipse.
background : radial-gradient(forme at x y, couleur1, ..., couleurN)
Valeurs possibles
x et/ou y définissent le point d'origine du dégradé radial,
couleur : le nom, la valeur hexadécimal ou la valeur RGBa
Exemple : Dégradé de type radial avec pour départ le centre au top et une forme
elliptique :
background: radial-gradient(ellipse at center top, green, blue);
On définit les couleurs du centre (verte) et externe (bleu) ainsi que la forme et la position
initiale.
Elles sont complétées par le rayon s'il s'agit d'un dégradé radial.
plus d'infos sur le radial-gradient
Colorzilla : générateur de dégradé CSS3
LISTES
ul, ol, il : balises de type block
Dimensions : width, heigth, min-width, max-width …
list-style-type : none, disc, circle, square (liste à puces)
list-style-type : none, decimal, lower-roman, upper-roman … (liste numérotées)
list-style-image : url(« image.png ») - remplace la puce par une image.
list-style-positon : outside ou inside - puce à l 'extérieur ou à l'intérieur du texte.
L'inconvénient de cette méthode est que les images choisies comme puces ne sont pas
forcement alignées avec le texte, et pire tous les navigateurs ne positionnent pas ces
puces de la même façon...
Pour palier à ce problème, l'idée est de mettre ces images en fond de <li>
background-image:url()
On peut ajuster la position de l'image par rapport au texte à l'aide de l'attribut backgroundposition:vertical horizontal ou grâce à un line-height égale à la hauteur de l'image pour un
centrage vertical, et d'un padding-left au moins égazle à la largeur de l'image pour ne pas
que l'image se superpose au texte.
EXOS
Exercice 1 : Image de fond
1/ Créez un nouveau dossier background
2/ Créez une page "background.html", notez vos observations en liste dans une section
centrée
3/ Mettre une image de fond de petite taille (body)
4/ Que se passe-t-il par défaut ?
5/ Ajoutez une image en répétition verticale
6/ Fixez l'image de fond, qu'observez vous ?
7/ Centrer une nouvelle image en haut de la page
8/ Mettre une img en .jpg pour le body et une .png en fixe dans une div qui prend tout
l'espace du body, jouez sur la transparence et la superposition, observations...
9/ Ajouter un background attachment fixed à votre section d'observations, modifier son
positionnement, observations...
10/ Ajouter une image de fond à chacun de vos éléments de votre liste d'observations
Exercice 2 : Repro
1/ Sur un deuxième fichier : background-02.html
2/ Reproduire le visuel avec vos propres backgrounds
Le projet
Reprendre les connaissances vues en cours et les appliquer au projet perso.
Correction exo 02