Background-image and background:linear-gradient

Asked

Viewed 57 times

1

I’m trying to make a background with a curved effect, but to put this effect I’m using an image(image link: https://cdn.discordapp.com/attachments/800754994739150878/800893255343538186/wave.png) but I also want to put a gradient effect in the background, but when I put the gradient together with the background-image it just doesn’t work. What can I do?


   <body>
        <section></section>
    </body>
 


   section{
    width: 100%;
    height: 400px;
    background-color: tomato;
    /* background:linear-gradient(90deg, red, blue);  */
    background-image:url(../images/wave.png); 
    background-size: 100% 150px;
    background-position: bottom;
    background-repeat: no-repeat;  
    }
background background-image

1 answer

1

Radial and linear-gradient are values of background-image, and when you used CSS as well as below, the background-image: {} ended up overwriting the gradient of background: {}, this happens because the CSS works in cascade.

background:linear-gradient(90deg, red, blue); 
background-image:url(../images/wave.png);

To fix this you have to use the two backgrounds in the same property, just separating them by comma, remembering that this technique serves for all the properties of the background guy bg-position, bg-size, etc. So your CSS should be something like this:

background-image:url(../images/wave.png), linear-gradient(90deg, red, blue);

Here is a didactic example, notice how the BG of body

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url(https://unsplash.it/200/200), linear-gradient(90deg, red, blue);
  background-size: 200px 200px, cover;
  background-repeat: no-repeat;
}

Browser other questions tagged background background-image

You are not signed in. Login or sign up in order to post.