Background image over gradient image

[jernatety]

I have an SMF forum website. I’d like to add a background image to the body in the index.css but the background is a gradient image already.

I want to keep that gradient but I want to put another image on top because I like the colors of the gradient but I want to put the image is 90% transparent over it. It’s kids playing hockey. I’ve tried everything I know of and I can’t get it to work.

Any help is greatly appreciated, thank you in advance.

body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 92%/130% “Verdana”, “Arial”, “Helvetica”, sans-serif;
margin: 0 auto;
padding: 15px 0;
}

[Beverleyh]

I haven’t tried anything but this sounds promising https://css-tricks.com/forums/topic/css-background-image-color-overlay/#post-269730

[Paulie_D]

You can have multiple background images…you just have to comma separate them.

  background-image: 
linear-gradient(red, transparent), 
url(yourpathhere);

https://css-tricks.com/stacking-order-of-multiple-backgrounds/

[jernatety]

Tried the stacking. it gets totally ignored like it’s not even there.

body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;,
url(“http://www.youthhockeyinfo.com/Themes/default/images/kids.png”) no-repeat;
font: 92%/130% “Verdana”, “Arial”, “Helvetica”, sans-serif;
margin: 0 auto;
padding: 15px 0;
}

[Paulie_D]

You’re gonna have to demo this but I can see at least one syntax error…you have a stray semi-colon after the first image….

Also, try not using the shorthand declaration….break it up into separate properties. It makes it easier to diagnose.

[Paulie_D]

https://codepen.io/Paulie-D/pen/yjGbzj

Try removing the quote marks…worked for me!

[jernatety]

Perfect! That did the trick. Thank you very much!

[Author]

Posts