CODEWITHSUNDEEP
cssbackground
user2893747
user2893747

Reputation:

Multiple backgrounds with CSS

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?

Upvotes: 1

Views: 96

Answers (1)

zur4ik
zur4ik

Reputation: 6254

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

Upvotes: 1

Related Questions