Multiple backgrounds with CSS

Question

I try to create element with custom background in CSS but only one background is visible.

#myElement {
 background-image: -moz-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%), url('../img/custom-bg.png');
 background-image: -o-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%), url('../img/custom-bg.png');
 background-image: -webkit-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%), url('../img/custom-bg.png');
 background-image: linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%), url('../img/custom-bg.png');
}

when I open it in browser #myElement has only gradient fill. It's not showing custom-bg.png

Can anyone help with this?

Answer 1

looks like you gradient is over the custom-bg.png image. Try to move url('../img/custom-bg.png') first and then put gradient.

Your code will lok like this:

#myElement {
 background-image: url('../img/custom-bg.png'), -moz-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%);
 background-image: url('../img/custom-bg.png'), -o-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%);
 background-image: url('../img/custom-bg.png'), -webkit-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%);
 background-image: url('../img/custom-bg.png'), linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%);
}