Radial-Gradient Circle Overlay on Background Image

Question

I am trying to apply a radial-gradient circle with dimensions on top of a background image in css. Whenever I apply the gradient line, it doesn't do anything - my layers appear to be out of order.

/* HTML Styles */
html {
    background-image: url("image1.jpg");
    background-attachment: fixed;
}

/* Body Styles */

body {

    background-image: url("image2.jpg");
    background: radial-gradient(circle closest-corner at 40% 70%, white 15%, 
    rgba(151, 151, 151, 0.5) 50%);

}

Answer 1

You need to append them in the same background property as with your code you are overriding the first background-image and only the gradient is considered. Also be sure you respect the order, the first one will be the top layer.

body {
  margin:0;
  height:100vh;
  background: 
  radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%), 
  url("https://lorempixel.com/400/200/") center/cover;
}

You can also use this syntax (the above one is the shorthand):

body {
  margin:0;
  height: 100vh;
  background-image: 
  radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%), 
  url("https://lorempixel.com/400/200/");
  background-size: auto, cover;
  background-position:center;
}