3

Based on the very simple example I found here: <dead link removed>.

The css should show both the transparent png and the gradient behind that. I'm wondering if the issue might be related to how the css is constructed.

body {
background-image:url('Clouds.png');
background-image: linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -o-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -moz-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -webkit-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -ms-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.24, #9B7698),
color-stop(0.63, #4447AB));}

If I have just the image:url, it loads the clouds fine. But otherwise it only shows the gradient and not the image.

I also am curious if I can have an additional gradient that fades to white at the bottom, so that when the page scrolls it meshes with the static clouds image, but I'm not familiar enough with gradients in general. Thanks in advance.

user229044
  • 232,980
  • 40
  • 330
  • 338
user1550914
  • 33
  • 2

2 Answers2

1

You need to write a single background(-image)-declaration, and separate the single components (image,gradient) by a ,

background: url('Clouds.png'), linear-gradient(bottom, #9B7698 24%, #4447AB 63%);

In your case, the second background-image definition (the gradient) will just overwrite the first one (your image).
Keep in mind that the order matters! You have to declare the image first, so it appears atop the gradient.
You can omit the old webkit syntax, it is not needed anymore.

Also note that multiple background-images are not supported by every browser!

Christoph
  • 50,121
  • 21
  • 99
  • 128
0

In supporting browsers, one can use multiple backgrounds:

background-image: -webkit-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');
background-image: -moz-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');
background-image: -o-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');
background-image: linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');

This will place the cloud image above the gradient. Note also that I removed the old webkit syntax and the -ms- prefix, and changed the order. The -ms- prefix is not needed, as no stable release of IE has supported only prefixed gradients.

Inkbug
  • 1,682
  • 1
  • 10
  • 26