Background-image et dégradé

Version imprimable

Bonjour,
j'ai une background-image qui comporte juste un élément png sur les deux coins de mon DIV

Code:

background-image: url("../../image/coingauche.png"), url("../../image/coindroit.png");

Si je rajoute une couleur de fond unie, ça colle

Code:

background-color: #EEEBDA ;

Mais si je veux la remplacer par un dégradé, ça coince!
Code:

1 2 3 4 background-image: url("../../image/coingauche.png"), url("../../image/coindroit.png"); background-position: left top, right bottom; background-repeat: no-repeat; background-color: linear-gradient(#f7f7d6,#cac8c6,#f7f7d6);
c'est y normal?
merci d'avance

08/09/2018, 12h37
ProgElecT

Salut

Citation:

c'est y normal?

Oui car MDN Mozilla

Citation:

Envoyé par MDN Mozilla

Les dégradés sont des valeurs de type <image> et non des couleurs (type <color>. Aussi, linear-gradient ne pourra pas être utilisée sur background-color et sur les autres propriétés qui n'acceptent que des valeurs de type <color>.

Tous compte fait,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html> <!-- BaseModel.html -->
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<style>
                        #mondiv{
                                position:relative;
                                width:800px;
                                height:500px;
                                background-image:url("https://www.developpez.net/forums/images/smilies/pc.gif"),
                                                url("https://www.developpez.net/forums/images/smilies/mouarf3.png"),
                                                linear-gradient(to right,red,orange,blue);
                                background-size:10%,25%,100%;
                                background-repeat:no-repeat,no-repeat,repeat;
                                background-position:top left,top right;
                        }
                </style>
	</head>
	<body>
		<div id="mondiv">
		</div>
	</body>
</html>

Est ce que cela correspondrait à ton attente ?

22/09/2018, 09h48
lesitadom39

Bonjour,
C'est parfait, mais pourrais tu m'expliquer le pourquoi du comment.
Merci pour cette avancée dans mon site (un petit pas pour ... et un grand pas pour....)
22/09/2018, 11h18
ProgElecT

Citation:

Envoyé par MDN Mozilla

Les dégradés sont des valeurs de type <image> et non des couleurs (type <color>....

Donc je me suis dit que background-image devait pouvoir supporter Les dégradés étant donné qu'ils sont de type image.....