Question

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.

Answer 1

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.