Aller au contenu

Comment utiliser tout le potentiel des arrières plans background avec CSS3

Les images d’arrières plans ou background sont très utilisées sur les sites web. Et tout cela est possible grâce aux propriétés CSS3 !

Tout est dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment utiliser tout le potentiel des arrières plans background avec CSS3

Bonjour à tous et bienvenu sur Développement Facile.

On continue la suite des cours dédiés à CSS 3 et aux nouvelles possibilités offertes par CSS 3. Dans ce nouveau cours, vous allez apprendre à utiliser tout ce qui est la notion d’arrière-plan, de background, l’image en background avec les balises CSS.

Définir la couleur du fond

Vous pouvez définir une couleur de fond, avec la propriété background-color, vous mettez votre couleur format RGB, hexadécimal, hexadécimal abrégé etc. et ça va définir la couleur de fond pour une image, pour une div, pour un spam, pour un paragraphe, pour body, pour input dans les champ de formulaire, ce que vous voulez, vous pouvez définir une couleur de fond.

Je vous ai mis un petit exemple pour définir la couleur de fond d’une page Web complète, donc sur body, donc body background-color CC2EFA, donc tout le contenu aura cette couleur de fond, ensuite vous pouvez définir une couleur de fond uniquement sur une balise div, donc sur vos balise div, vous mettez div largeur width 250 pixels, la background color, font size, la taille de la police en 28 pixel, l’alignement du texte centré, donc là vous aurez uniquement la couleur de fond sur la balise div, et non pas sur la page complète, donc après c’est à vous de jouer en fonction de ce que vous avez besoin, pour votre vos présentations de page Web, et bien vous définissez soit sur body, soit sur div, soit sur des images comme vous le souhaitez.

Ajouter une image de fond/background

Vous pouvez bien évidemment, définir des images de fond, background image, utilisez cette propriété en transmettant l’URL background.png, ou l’URL complète en passant par un nom de domaine.
Voici un exemple qui met une image de fond sur toute la page HTML complète sur body, background-image URL background.png, vous voyez souvent sur des sites internet une grande page d’accueil formulaire mail qui vous demande votre nom, votre prénom avec un bouton recevoir, derrière c’est un background image sur body qui est définit, vous pouvez faire la même chose maintenant pour vos sites internet.

Exactement même principe, vous pouvez définir une background image, une image de fond uniquement sur une balise div, plutôt que de prendre toute votre page html, vous pouvez prendre juste un emplacement div avec une image de fond grâce à background image.

Répéter l’image de fond

Bien évidemment vous pouvez choisir de répéter l’image de fond, il faut savoir que sur certains sites internet en fait c’est une petite image, qui fait 3 pixels par 3 pixels, ou 2 pixel je ne sais pas ou 10 pixels par 10 pixels, qui est répétée à la suite des autres, et ça fait une image de fond, donc ça c’est une idée pour optimiser la rapidité d’affichage de votre site, donc utilisez background-repeat, avec repeat ça répétera l’image de fond.
Vous avez différentes valeurs pour la propriété repeat, repeat ça répète l’image horizontalement, verticalement, repeat-x ça répète seulement l’image horizontalement, repeat-y ça répète seulement l’image verticalement et no repeat ça affiche l’image une seule fois sans la répéter.

Donc un petit exemple ou justement on utilise une image de 10 pixel par 10 pixels, qu’on répète horizontalement et verticalement, tout simplement.

Positionner l’image

Bien évidemment vous avez une possibilité de positionner l’image dans votre page HTML, ou dans votre div, avec background-position, donc vous lui transmettez les coordonnées X et Y en pixel, il y a différentes valeurs pour les positions, left, center, right, top, center, ou bottom, donc left : gauche, center : centre, right : doirte, ça détermine la position horizontale et tom center bottom la position verticale, vous pouvez également mettre des valeurs négatives, vous avez votre point 00, l’image là, vous pouvez la mettre ici, avec des valeurs négatives, tout simplement.

Là je vous montre une image qui affiche background-repeat, donc no repeat elle ne sera pas répétée, une seule fois dans une div de largeur 300 width, hauteur height 300, avec une bordure de 2 pixels bleus tout autour solide et en background position centré sur l’horizontale et à droite sur la verticale, donc elle sera ici l’image.
Vous avez le code source, vous pouvez faire l’essai, le reprendre chez vous.

Fixer l’image de fond/pas de défilement

Vous avez background-attachment, souvent vous voyez des sites web ou vous déplacez, il y a besoin de déplacer scroller avec la barre de défilement le contenu parce qu’il est trop grand pour la page, et l’image de fond elle ne bouge pas, elle reste fixe, c’est la propriété background-attachment, vous avez 2 valeurs, scroll ou fixed, la valeur scroll elle fait défiler l’image d’arrière-plan avec le contenu de la page, la valeur fixed vous avez le contenu qui défile et par contre l’image elle reste fixe, simplement. C’est comme CSS cette propriété background-attachment, qui utilise des sites avec une image de fond qui ne défile pas.

Je vous ai mis un exemple de code source, sur une div, donc en principe on le met sur body pour toute la page, mais vous pouvez le mettre sur div comme un article par exemple article de blogues qui prend plus d’une page pour déplacer, vous pouvez mettre une grande image sur votre div en background-attachment fixed.

Votre plan d’actions !

Maintenant c’est à vous de jouer, je vous ai montré comment vous pouvez utiliser les arrière-plans dans votre site Internet avec les propriétés CSS 3, retrouvez sous cette vidéo un exemple de code source comme d’habitude, si vous avez des questions, posez-les directement sous ce cours vidéo et moi je vous dis à très bientôt pour le prochain cours sur Développement Facile.

 

 

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source CSS3

Voici un exemple de code CSS3 utilisant un background.

Téléchargement du code source Exemple de background avec CSS3

Cliquez ici pour télécharger le code source Exemple de background avec CSS3

Comment utilisez-vous les propriétés CSS3 background ?

Dites-moi, dans les commentaires, de quelle façon vous implémentez background avec CSS3 et partagez votre code !

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>