0

I'm trying to have an image as my background. However, with super large resolutions available, it is just white space beyond the image. I don't want repeat. I tried this but all it shows is the image. I would like for the gradient (or the green if the gradient is unsupported) to extend to the right and below if the boundary of the image is reached. This still shows just the image.

body {
background-color: darkgreen; /* For browsers that do not support gradients */
background-image: linear-gradient(-90deg, white, darkgreen);  /* Standard syntax (must be last) */
background: url("images/bg1.png");
width: auto; 
height: auto;
font-family: Arial, Helvetica, sans-serif;
}
Steve Cross
  • 89
  • 1
  • 13
  • Please attach you background image 'bg1.png''. – Priya jain Aug 28 '20 at 13:45
  • 1
    Does this answer your question? [How do I combine a background-image and CSS3 gradient on the same element?](https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element) – Priya jain Aug 28 '20 at 13:47

2 Answers2

1

For color and image in background:

Example:

background-image: url("image_url"), linear-gradient(rgba(200,200,200,.5), rgba(100,100,100,.7));

For single image in bg 100% with High Resolution:

background-size: cover;
Edwin Alwin
  • 192
  • 6
-1
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(-90deg, white, darkgreen);/* W3C*/
  background-size: cover;
Shahryar Mohajer
  • 581
  • 3
  • 11