Home/ Questions/Q 8025499
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T23:11:01+00:00

In general, I know that it is possible to use CSS3 to specify multiple

  • 0

In general, I know that it is possible to use CSS3 to specify multiple backgrounds, and I have successfully overlaid a gradient on top of an image before. However, this seems to fail when applied to the base html element. In both Chrome and Firefox, the gradient is not rendered in the CSS below:

html {
    background:#14283C;
    background-image:url('/images/bluenoise.png?1338342472'),-webkit-gradient(radial, center 8em, 0, center 8em, 100, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0)));
    background-image:url('/images/bluenoise.png?1338342472'),-webkit-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-moz-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-o-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-ms-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
}

If I apply the same styles to body, the gradient is rendered correctly. Any thoughts on why there would be this difference?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tried some of the tricks mentioned in the comments, but what ended up working is the following:

    html{
    background:#14283C;
    background-image:-webkit-gradient(radial, center 8em, 0, center 8em, 100, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0))),url('/images/bluenoise.png?1338386219');
    background-image:-webkit-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-moz-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-o-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-ms-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
}

    The only change is that I list the gradients before the images. It looks like the various background-image arguments are overlaid in reverse order. This explanation, though, would seem to be contradicted by ScottS’s fiddle, which also shows the desired behavior despite giving the opposite ordering.

    • 0