Im facing a weird problem which probably has a simple solution that i am completely blind to.

I want to change the background: to a background-image: but it does not seem to display the image if i do that. The code below displays no image

#background {
background-image: transparent url('src/assets/images/splash.jpg') 0% 0% no-repeat padding-box;
background-size: contain;
 opacity: 1;

}

meanwhile the text below displays the image.

#background {
background: transparent url('src/assets/images/splash.jpg') 0% 0% no-repeat padding-box;
background-size: contain;
opacity: 1;

What am i missing here...?

I would like to change it to background-image in order to simply add a gradient toning to the background

CodePudding user response：

background is a shorthand property that takes multiple values so you can set (in your example) the background-color, the background-image, the background-position, the background-repeat and the background-origin in one go.

The background-image property only lets you set the background image (it does take multiple values, but all of them are background images which it renders in a stack).