0

Hey so I have this simple div

<div class="container">
  <h1>This is content</h1>
<div>

Then I have some CSS

.container {
  width: 300px;
  height: 300px;
  background-image: url('some_image');
}

My problem is that if the background image is very high quality it will take a second or two to load.

Is there a way for me to add a gradient to that div as well, so that for that second that the image doesn't load, the gradient shows? Almost like a gradient below the background image.

devAR
  • 349
  • 7
  • 21
  • 1
    background-image lets you have more than one image. Please read up on this eg at https://developer.mozilla.org/en-US/docs/Web/CSS/background-image or you could put the gradient on a before pseudo element. If still stuck put the code you have tried into your question as a runnable snippet. – A Haworth Oct 29 '22 at 07:34
  • check this answer: https://stackoverflow.com/questions/37588017/fallback-background-image-if-default-doesnt-exist – nourhomsi Oct 29 '22 at 07:44

1 Answers1

0

I hope the 'CSS' code given below helps!

.container {
width: 300px;
height: 300px;
background-image: url('some_image');
background-image: url('some_image'), linear-gradient(color1, color2);
}

In the above code, Line 3 sets the background image to the webpage.

If in case, the image doesn't get displayed, Line 4 adds a gradient shade to the background.

AdyaTech
  • 7
  • 3
  • Line 4 will be the one that is always used under the cascade principal of CSS. If the url image has any transparency the gradient colors will show through. – A Haworth Oct 29 '22 at 08:03