CSS fond dégradéFermé

Question

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

Utilisateur anonyme · Answer

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.

aladin07 · Answer

Utilises ceci:   

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

CSS fond dégradé

2 réponses

Discussions similaires

Newsletters