Aller au contenu

un fond dégradé en css


zirone

Sujets conseillés

Bonjour.

J'ai cherché sur google, je n'ai rien trouvé.

Sauriez-vous comment il faut si prendre pour avoir un fond en dégradé entièrement régit en css?

par exemple: http://www.tv.com/

le fond part du noir a un bleu noir.

Merci beaucoup. :wub:

Modifié par zirone
Lien vers le commentaire
Partager sur d’autres sites

Tu fais comme le site que tu lies:

  • tu crées une image de 1px de large sur un bon millier et demi de pixels de haut. Cette image sera un degradé
  • tu la définis en image de fond dans ta CSS

;)

Lien vers le commentaire
Partager sur d’autres sites

J'ajoute une petite astuce.

Dans l'exemple du site de TV que tu propose, tu créé effectivement un gif (d'un pixel de large sur une hauteur de 1000px ou plus selon la hauteur que ta page maxi aura).

Du noir au bleu. Et en couleur de fond, tu mets le même bleu que celui qui est en bas de ton dégradé. Comme ça, si tu as une page vraiment grande, ou si une personne regarde ton site en très haute résolution, le fond restera joli à voir même s'il n'y a plus de dégradé.

:)

Lien vers le commentaire
Partager sur d’autres sites

Salut Zirone,

Dans l'exemple que tu donnes il faut effectivement faire comme Dudu et Athmos t'ont dis.

Une image 1 px en dégradé sur une bonne hauteur puis quand même préservé une couleur de fond de la même couleur que le bas de ton dégradé au cas ou certains visiteurs auraient des réso d'écran immense (du moins supérieure à la hauteur de ton image de fond.

A cela j'ajouterai que pour donner le même effet que sur le site exemple, il serait bon de "fixer" le fond, ainsi quelque soit la hauteur de ta page tu aura toujours le même dégradé.

Procéde ainsi dans ton CSS :

background: #couleur-de-fond url(background-de-1-px.jpg) repeat-x fixed top left;

Ca devrait faire l'affaire

Lien vers le commentaire
Partager sur d’autres sites

Un dernier truc : ne pas oublier de définir comme couleur de fond la couleur du dernier pixel de l'image...

En effet, ceux qui ont une haute résolution verront la couleur de fond en-dessous de l'image dégradée. Si elle n'est pas la même, ça donne une vilaine coupure ;)

(je précise parce que ça se voit assez souvent...)

Lien vers le commentaire
Partager sur d’autres sites

  • 2 months later...

bonsoir,

ce fil de discussion n'est plus très bavard mais pour un dégradé de fond de page vous pouvez faire :

<body style="

width:100%;

height:100%;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=black,en

ColorStr=#401700);">

Attention cette formule n'est compatible apriori qu'avec IE, pour aller plus loin:

http://msdn.microsoft.com/library/default....rs/gradient.asp

A+

Lien vers le commentaire
Partager sur d’autres sites

Attention cette formule n'est compatible apriori qu'avec IE

Normal car cette horreur ce truc pardon, est complètement propriétaire Microsoft.

À quoi peut bien nous servir un sombre machin invalide qui marche uniquement avec le pire navigateur du marché ? :unsure:

Merci quand même pour l'intention, et bienvenue sur le Hub.

PS: c'est très normal, tes sauts de ligne au beau milieu de tes attributs ? Au delà d'un aspect de compatibilité avec tous les navigateurs (qui sauf ton respect ne semble pas être ton fort), ce n'est pas extrêmement bon pour la bande passante par exemple.. j'espère que tu ne le fais pas pour toutes les balises de toutes tes pages :wacko:

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...