-1

Ok so I´m trying to put an explosion gif on both sides of website cause it looks cool but I can´t figure out how to do it and keep the original background color on the parts that aren´t part of the gif.

background-color: #270436;
background:url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y,url("explosion.gif") right repeat-y;

I used this from another post i saw and it didn´t work

Bugboy
  • 1
  • 3

2 Answers2

0

Simply move the background-color property after the background property, since now, your background image is taking priority the background color:

body {
  background: url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y, url("explosion.gif") right repeat-y;
  background-color: #270436;
}

Or, alternatively, add the color as part of the list of background properties:

body {
  background: url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y, url("explosion.gif") right repeat-y, #270436;
}
human bean
  • 847
  • 3
  • 15
0

Add the background-color property after the background property .

body{
 background:url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y,url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") right repeat-y;
  background-color: #270436; 
}
adarsh
  • 17
  • 4