CODEWITHSUNDEEP
cssbackground-imagegradient
Delphi
Delphi

Reputation: 13

CSS gradient and background-image above gradient

My question is this: How can i make my 2 background images appear to the right and left above a CSS gradient. I'm working on a Joomla website using the JA Elastica template (modifying the default CSS).

In my current CSS if i put the "background: url('images')" above the gradient, then it shows the images but not the gradient and if i put it below the gradient it shows the gradient but not the images.

The code i'm currently using is this:

body#bd {
background-image: linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -o-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -moz-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -webkit-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -ms-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(142,210,46)),
color-stop(0.51, rgb(171,252,74)),
color-stop(0.76, rgb(206,255,104)));
background:
url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right,
url('https://dl.dropbox.com/u/6512758/onebeat.ro/left.png') no-repeat top left;
}

Upvotes: 1

Views: 1098

Answers (1)

mikey242
mikey242

Reputation: 335

Everything needs to be on the same background-image property otherwise the previous background statement will be replaced by the next one. For example:

background-image: url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right, linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);

Check here for more examples: How do I combine a background-image and CSS3 gradient on the same element?

Upvotes: 2

Related Questions