[Résolu] Fond dégradé transparent sur l'intégralité du fond de page

Bonjour à tous,

Pouvez-vous me dire si un fond dégradé transparent CSS3 peut s'appliquer sur l'intégralité su fond de page quelque soit sa dimension, si oui, comment le marquer ?

Actuellement je m'y prends comme ci-dessous :

CSS :

}
	  .box{		/*--------début du fond dégradé transparent--------*/
	width:1000px;
	height:600px; 
	color:#fff;
}
#gradient{
	border:0px solid #000000;
	background: -moz-linear-gradient(bottom left, Green, rgba(0,255,0,0));
	background: -webkit-linear-gradient(bottom left, Green, rgba(0,255,0,0));
	background: -ms-linear-gradient(bottom left, Green, rgba(0,255,255,0));
	background: -o-linear-gradient(bottom left, Green, rgba(0,255,255,0));
}	/*--------fin du fond dégradé transparent--------*/

HTML :

<div id="gradient" class="box">

RESULTAT OBTENU :

http://damier.manceau.free.fr/ombrage.html

Vous aurez remarqué que la surface du dégradé est délimitée par les paramètres de .box

Y-at-il moyen de s'affranchir de cette limitation?

Merci de vos conseils.
Modifié par dado (16 Aug 2012 - 15:35)

http://www.colorzilla.com/gradient-editor/

si tu galères à faire ton dégradé en css

Bah écoute, applique le dégradé à ton body, ça devrait mieux aller

Par contre, c'est un peu laid vu que ça se répète, je vais regarder ça de plus près :o)

Comme l'a suggéré SuperMerguez, utilise le gradient generator de colorzilla, t'auras plus ces problèmes..
Modifié par Knozelfhoegtj (16 Aug 2012 - 17:10)

Merci SuperMerguez et Knozelfhoegtj de vous être intéressés à ma question.

Avant de poser ma question, j'avais expérimenté le gradient-éditor de colorzilla.
La fenêtre présentée sur le site peut être redimentionnée, en revanche le code obtenu ne donne pas d'instruction pour parvenir à ce que le dégradé occupe l'intégralité du fond de page.

Le site gradients.glrzad.com donne des résultats identiques.

Mon instruction

<div id="gradient" class="box">

est bien inscrite dans le body de la page html. Peut-être l'instruction n'est-elle pas la bonne ?

En conclusion, si vous le pouvez, je veux bien que vous regardiez cela de plus près, car je ne suis pas fort en marquage de code Css

Comme te l'à dit Knozelfhoegtj, un application du dégradé sur le body te permettra un rendu sur l'intégralité de ta page.

Mes différents essais pour déplacer le code du head vers body restent sans effet.

Pouvez-vous me dire, par rapport au code reproduit dans mon message initial, ce que je dois concrètement écrire dans le body pour obtenir que le dégradé soit réparti sur l'intégralité du fond de page.

Merci de vos conseils.

Tu as juste à styliser la balise body.

body {
background: -moz-linear-gradient(bottom left, Green, rgba(0,255,0,0));
background: -webkit-linear-gradient(bottom left, Green, rgba(0,255,0,0));
background: -ms-linear-gradient(bottom left, Green, rgba(0,255,255,0));
background: -o-linear-gradient(bottom left, Green, rgba(0,255,255,0));
}
Modifié par desire (16 Aug 2012 - 21:38)

Bravo Désiré, on avance :

Si j'inscrit ton code dans le head. Le dégradé s'applique bien à toute la page.

Mais,

Dès que j'inscrit dans le body le contenu qui doit s'y trouver, alors une seconde couche de dégradé s'applique , limitée à la taille de ce que j'ai inscrit dans le body.

http://damier.manceau.free.fr/degrade.html

Il reste à trouver comment faire pour que ce que j'inscrit dans le body ne constitue pas cette couche indésirable superposée.

Bonjour à tous,

Je pense être parvenu à un résultat satisfaisant après avoir consulté ce post :

http://www.developpez.net/forums/d1252729/webmasters-developpement-web/css/arriere-plan-degrade/

Voici la solution appliquée :

CSS :

body {
min-height: 100%;	*/déterminant*/
font: 13px verdana, sans-serif;
border:0px solid #000000;
background: -moz-linear-gradient(bottom left, Green, rgba(0,255,0,0));
background: -webkit-linear-gradient(bottom left, Green, rgba(0,255,0,0));
background: -ms-linear-gradient(bottom left, Green, rgba(0,255,255,0));
background: -o-linear-gradient(bottom left, Green, rgba(0,255,255,0));
}
html{
height:100%;            */ paramètre inutile si le dégradé atteint le bas de page. Sinon, porter une valeur supérieure à 100% */
}

HTML : Rien de particulier

RESULTAT :

http://damier.manceau.free.fr/essai/aston-martin.htm

J'ai annoté dans le code les propriétés qui me paraissent déterminantes pour que le fond dégradé s'applique.
Il serait intéressant qu'une personne plus autorisée que moi produise un tutorial argumenté sur le sujet.
Modifié par dado (19 Aug 2012 - 11:56)

Alors, pour porter ma petite pierre à l'édifice, effectivement…

html
{
    height: 100%
}

Ceci découpe le background à la largeur de l'écran (et la page est plus grande que l'écran, cela se répète)

J'ai appliqué une 2e fois la méthode du min-height sur le sélecteur html (en plus du body) ; et tout est bon : le background s'applique bien à toute la page, même si elle est de hauteur supérieur à l'écran