28172 sujets

CSS et mise en forme, CSS3

(re) bonjour,
En plus du soucis avec mes images en background, je voudrais rajouter un dégradé.
J'ai essayé une image avec un dégradé de couleur et un background-repeat, à priori ça ne marche pas on ne peut pas avoir un repeat sur une image et un no-repeat sur une autre.
Le moz-linear-gradient ne marche pas non plus en mélange avec une image. (ou du moins je n'ai pas réussi)
La seule solution que j'ai trouvé pour contourner le hic, c'est de mettre un dégradé moz-linear et d'utiliser une justif sur 3 colonnes pour mes images...
Y a-t-il une solution plus élégante ?
Bonne journée,
Y
PS Faites des trous dans vos gants, comme ça vous aurez l'air et les gants Smiley lol
Modérateur
Salut,

Je pense que cet article (premier lien dans la recherche google "multiple background image css gradient") répond a ta question : http://snook.ca/archives/html_and_css/multiple-bg-css-gradients

Il suffit apparemment de juste empiler les couches comme on le fait avec le background-image multiple :

background: 
	url(/img/acceldom.jpg) 10px 10px no-repeat,
	-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat,
	-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat;
_laurent a écrit :
Salut,

Je pense que cet article (premier lien dans la recherche google "multiple background image css gradient") répond a ta question : http://snook.ca/archives/html_and_css/multiple-bg-css-gradients

Il suffit apparemment de juste empiler les couches comme on le fait avec le background-image multiple :

Merci ! Je vais essayer comme ça. Je sais que google est mon ami, mais je n'ai pas essayé "multiple background image css gradient".
C'est le ; qui m'a mis dedans. Je faisais background 1, background2... et à la fin un ;

Merci à toi et bonne journée,
Y
Modérateur
y-forums a écrit :
C'est le ; qui m'a mis dedans. Je faisais background 1, background2... et à la fin un ;

Je n'ai pas bien compris, il y a bien des virgules entre chaque background et un point-virgule à la fin de la ligne comme dans tout CSS hein Smiley langue
C'est bien de la forme :
background: background1, background2, background3;
_laurent a écrit :

Je n'ai pas bien compris, il y a bien des virgules entre chaque background et un point-virgule à la fin de la ligne comme dans tout CSS hein Smiley langue
C'est bien de la forme :
background: background1, background2, background3;


Vivivi !
Ca m'donne un bien bieau truc s'te code:
.header {
	background-image:
	url(images/le-chat.gif),
	url(images/logo.jpg),
	-moz-linear-gradient(top, rgba(10,60,15, 0.8), rgb(0,0,0));
	background-position:95%, 10px 10px, 0% 0%;
	background-size: 10%, 5%, 100%;
	background-repeat: no-repeat;
 	min-height: 250px;
 	padding-top: 0px;
    /*à tester pour la hauteur : height: x-y vmin;*/   
}


Bon week-end (au cas où...) et merci bien !
Y