Problem with background and linear-gradient

Asked

Viewed 745 times

1

I’m trying to make a background for the body using an image and a linear-gradient, on loading the gradient appears for an instant, but is soon replaced only by the image, as you can see below.

body {
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Lake_O_Hara_from_Yukness_Ledge_Alpine_Route.jpg/800px-Lake_O_Hara_from_Yukness_Ledge_Alpine_Route.jpg"),
    linear-gradient(to left, rgb(0,180,0), rgb(0,180,180));  
    background-size: cover;
}
<!DOCTYPE html>
<html>
  <body>
  </body>
</html>

Why does this happen?

html css css3

1 answer

3


You got two problems there.

The first, which is not exactly a problem is that the image is over the linear-gradiente, and not the linear-gradiente above the image.

The second is that you’re using rgb() and should be rgba() on the gradient, so you can put the opacity as you want.

Ex: rgba(0,0,0,0.5), the "A" is the Alpha channel and it controls the color transparecia, in the example I gave is a black with 50% opacity.

See how your code looks after setting:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: linear-gradient(to left, rgba(0,180,0,0.5), rgba(0,180,180,0.5)), url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Lake_O_Hara_from_Yukness_Ledge_Alpine_Route.jpg/800px-Lake_O_Hara_from_Yukness_Ledge_Alpine_Route.jpg");  
    background-size: cover;
}
<!DOCTYPE html>
<html>
<body>
    
</body>
</html>

  • It worked, thank you very much, but now another question has arisen because of rgba, I saw in an example like this, body {&#xA; background: url('imagens/capa.png'),&#xA; url('imagens/ruido.png'),&#xA; linear-gradient(50deg,#ff4169,#7c26f8);&#xA; background-attachment: fixed;&#xA; overflow-x: hidden;&#xA;}, this overlap is done with the overflow? Because the colors of the linear-gradient are hexadecimal, and the gradient is below the url of the image.

  • 1

    That must be because of the images. PNG tb accept Alpha Channel, which means you can put transparency in them in the Photoshop image editor, then export the . Translucent PNG, it can only be that, or else the element is all transparent. Only evaluating the model to be sure. On the overflow he does not serve to create transparency, he serves to "hide" what is coming out of Div, like if the content of the Son is coming out of the Father you put overflow in the Father to hide the content of the Son who is out understands.

  • Wow, that’s exactly it, I was trying to fix everything in CSS, I had done with rgba, but the image .jpg was on top, so I hid the gradient in the same way, thank you very much @hugocsl for the excellent explanation!

  • That’s right, Tmj [] s

Browser other questions tagged html css css3

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