How to add an image as a background on both sides of the screen?-CodePudding

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

CodePudding user response：

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;
}

CodePudding user response：

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; 
}