Dégradé ultra léger CSS pour background / arrière plan

Administrateur

Mieux vaut faire des backgrounds super légers en CSS, avec un exemple vous comprendrez très bien.
Vous voulez faire un dégradé noir qui donne vers le rouge puis reste en rouge se répétant horizontalement et collé en haut. Autrement dit l'arrière plan sera rouge avec un dégradé horizontale noire en haut plongeant en bas vers le rouge.

Créez un dégradé noir sur rouge de hauteur 60px et de largeur 1px. Enregistrez le en gif car une petite image avec peu de couleurs est plus légère encore en GIF ( le radin d'octet !!! xD )

En suite dans la feuille de style CSS faites ce code :

Code:

body
{
background-image:url(http://www.tonsite.com/image.jpg);
background-repeat:repeat-x;
background-position: top left;
background-color: #FF0000;
}

Flo

Mais dis moi comment je créer l'image

Administrateur

Bonsoir Flo,

tu fais le dégradé avec "Gimp" par exemple qui est libre et gratuit. Ou alors avec n'importe quel programme qui peut tracer un dégradé et exporter du jpg ou du gif.

fadia

salut je veux mettre une image en arrière plan.comment?

Administrateur

salut,

tu veux mettre une image en arrière plan sur une table ? div ? td ? En fond de page ?
Par exemple en fond de page :

Code:

body{background-image:url(http://www.zesite.com/images/ton_image.png);}

Guest-41

Bonjour,sa vas mercis moi aussi est toi sa vas aller byebye

Fat

Hello,
merci pour l'info c'est super utile ^^

Au plaisir de relire.

pika28

Code:

body
{
background-image:url(/image.jpg);
background-repeat:repeat-x;
background-position: top left;
background-color: #FF0000;
}

Bonjour, peut-on simplifier ce code du genre :

Code:

body
{
background-image:url(/image.jpg) repeat-x position:top-left color:#FF0000;
}

Niounter

De cette manière oui :

body{
background:url(/image.jpg) repeat-x top-left #FF0000;
}

test

Bien, merci très utile.

que dire de plus ?

mokmap

bonjour,

j'aimerais savoir si c'est possible de prolongé une image verticalement ?
je m'explique : je ne veux pas faire un repeat-y qui me répéte plusieur l'image verticalement, je veux que mon image ce prolonge dans la coutinuité de celle-ci celon y .
un exemple sur le site de microsoft : www.microsoft.com/fr/fr/default.aspx
on voit bien que l'arriére plan du centre est prolongé verticalement comment on t-il fait ?

merci

Dégradé ultra léger CSS pour background / arrière plan