Anoobnyme GOD OF COOKIES
Messages : 1445
| Un background intelligentInformations générales- Description :
- Marre de faire une image de fond sur mesure ? Grâce au CSS nous avons la solution pour faire un background intelligent avec la propriété background-size et sa valeur cover.
- Démo :
- Aperçu
- Testé sur :
- Mozilla Firefox, Chrome
- Crédits :
- Proposé par Anoobnyme le 04/05/2012 | Tutoriel approuvé par Anoobnyme
Le tutorielNous allons toucher uniquement au CSS et plus particulièrement à la balise body. Mais d'abord, petite explication sur la valeur cover : cette valeur sert, à partir d'une image (de n'importe quelle taille), à prendre tout l'espace disponible (ici, le body, donc toute la page). Donc maintenant il est presque inutile de calculer pour toutes les résolutions d'écrans, vu que ça se fera automatiquement. Maintenant passons dans le vif du sujet : Dans votre CSS, dans la logique, tout le monde a mis la balise body, donc cherchez-là (si vous n'êtes pas ordonné). Et nous allons mettre un fond (moi j'ai utilisé : celle-ci ) : - Code:
-
body{ background-image : url('http://i.sofoot.com/IMG/img-vincent-kompany-manchester-city-1335818940_x620_articles-alt-156369.jpg'); /*l'image de fond*/ bakcground-repeat : no-repeat; /*ici je ne veux pas que le fond se répète*/ } Maintenant nous allons utiliser la propriété background-size : - Code:
-
body{ background-image : url('http://i.sofoot.com/IMG/img-vincent-kompany-manchester-city-1335818940_x620_articles-alt-156369.jpg'); /*l'image de fond*/ background-repeat : no-repeat; /*ici je ne veux pas que le fond se répète*/ -webkit-background-size: cover; /* pour Chrome et Safari */ -moz-background-size: cover; /* pour Firefox */ -o-background-size: cover; /* pour Opera */ background-size: cover; } Nous avons terminé |
Dernière édition par Anoobnyme le Mar 08 Mai 2012, 10:57, édité 2 fois | |
|
Anoobnyme GOD OF COOKIES
Messages : 1445
| FAQ Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici : http://www.css-actif.com/f17-aide-css-xhtml | | |
|
Nessie
{ Membre }
Messages : 41
| Ah c'est chouette ça !! Merci c'est cool pour les différents navigateurs! Faut prier pour qu'aucun ne passe par IE xD | | |
|
Stef7891
{ Membre }
Messages : 16
| Merci pour cet aide, la j'ai pas perdu 5h a trouver les mesure parfaite!! | | |
|
Félina
{ Membre }
Messages : 57
| |
Orange
RocketMan
Messages : 3086
| Il y a une petite erreur: - Code:
-
bakcground-repeat : no-repeat; /*ici je ne veux pas que le fond se répète*/
On dit background-repeat ^^... et dans l'exemple également. | | |
|
Anoobnyme GOD OF COOKIES
Messages : 1445
| C'est ça quand on tape vite... merci d'avoir signaler | | |
|
md1991
{ Membre }
Messages : 19
| |
pamina
{ Membre actif }
Messages : 1170
| Génial. J'ai fini de me (vous) poser 36 questions sans réponses. | | |
|
K-Surf
{ Spécialiste }
Messages : 1707
| Trop fort, merci | | |
|
eveuh44
{ Membre }
Messages : 33
| Un grand merci !!!!!!!! | | |
|
Dynamic
{ Membre }
Messages : 8
| Je connaissais déjà et je trouve ça super bien, mais je trouve ça dommage, car ça ne fonctionne pas sur les versions inférieures à 9.0 de IE. ! Merci pour l'astuce. | | |
|
Candy Suki
{ Membre }
Messages : 10
| Merci beaucoup Depuis le temps que je cherche cette astuce... | | |
|