CSS fond dégradé
TRUNCKS
Messages postés
1019
Date d'inscription
Statut
Membre
Dernière intervention
-
aladin07 Messages postés 277 Date d'inscription Statut Membre Dernière intervention -
aladin07 Messages postés 277 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai une question tout simple.
J'ai fait un fond dégradé sur photoshop, il part du bleu vers le blanc pour repartir vers le vert à la fin.
J'aimerai l'appliquer à mon Body.
Mon soucis, c'est comment faire pour qu'il s'adapte à la taille du site ?
Car je fais un repeat, il coupe et repart à la première couleur.
Comment faire pour que ce fond prenne l'ensemble du site ?
Merci à vous
J'ai une question tout simple.
J'ai fait un fond dégradé sur photoshop, il part du bleu vers le blanc pour repartir vers le vert à la fin.
J'aimerai l'appliquer à mon Body.
Mon soucis, c'est comment faire pour qu'il s'adapte à la taille du site ?
Car je fais un repeat, il coupe et repart à la première couleur.
Comment faire pour que ce fond prenne l'ensemble du site ?
Merci à vous
A voir également:
- CSS fond dégradé
- Comment mettre une vidéo en fond d'écran - Guide
- Fond de page word - Guide
- Trame de fond word - Guide
- Google fond noir - Guide
- Enlever le fond d'une image - Guide
2 réponses
Salut,
Il faut que tu adaptes la taille de ton image à la taille de ta page et que tu ne répètes pas l'image en y.
Seulement tes visiteurs n'auront pas tous la même résolution donc pour certains l'image sera trop grande et ne verrons rien et pour d'autres, elles sera trop petite !
Ce que tu peux faire :
- Créer une image très grande ou t'appliques ton dégradé au milieu (et donc tu auras une grande surface de vert en bas et une grande surface de bleu en haut) afin que ceux qui ont une petite résolution puissent quand même voir le dégradé.
- Faire un dégradé en CSS3 mais ça ne marche pas sur tout les navigateurs... dont internet explorer avant la version 10 et google chrome.
- Je pense qu'avec du javascript tu dois pouvoir faire ça mais c'est une technique plus lourde.
Enfaite il n'y a aps vraiment de solution pour le moment, c'est de la bricole.
Il faut que tu adaptes la taille de ton image à la taille de ta page et que tu ne répètes pas l'image en y.
Seulement tes visiteurs n'auront pas tous la même résolution donc pour certains l'image sera trop grande et ne verrons rien et pour d'autres, elles sera trop petite !
Ce que tu peux faire :
- Créer une image très grande ou t'appliques ton dégradé au milieu (et donc tu auras une grande surface de vert en bas et une grande surface de bleu en haut) afin que ceux qui ont une petite résolution puissent quand même voir le dégradé.
- Faire un dégradé en CSS3 mais ça ne marche pas sur tout les navigateurs... dont internet explorer avant la version 10 et google chrome.
- Je pense qu'avec du javascript tu dois pouvoir faire ça mais c'est une technique plus lourde.
Enfaite il n'y a aps vraiment de solution pour le moment, c'est de la bricole.
Utilises ceci:
De plus, utilise https://modernizr.com/ pour simuler CSS3 dans les anciens navigateurs
body {
background-image: -moz-linear-gradient(top, #Couleur1, #Couleur2); // FF 3.6+
background-image: -ms-linear-gradient(top, #Couleur1, #Couleur2); // IE10
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#Couleur1), to(#Couleur2)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, #Couleur1, #Couleur2); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, #Couleur1, #Couleur2); // Opera 11.10
background-image: linear-gradient(top, #Couleur1, #Couleur2); // Standard
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",#Couleur1,#Couleur2)); // IE9 et moins
}
De plus, utilise https://modernizr.com/ pour simuler CSS3 dans les anciens navigateurs