Background-image et dégradé

**lesitadom39** · 08/09/2018, 11h30

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 background-color: #EEEBDA ;

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ProgElecT** · 08/09/2018, 12h37

Salut

c'est y normal?

Oui car MDN Mozilla

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>.

**ProgElecT** · 22/09/2018, 09h26

Tous compte fait,

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**lesitadom39** · 22/09/2018, 09h48

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....)