Problem with background and linear-gradient

Question

Problem with background and linear-gradient

Navigation

#1 by (3 votes)

1

I'm trying to make a background for body using an image and a linear-gradient , in loading the gradient appears for a moment, but soon is 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

asked by anonymous 22.03.2018 / 19:02

1 answer

How do I avoid having the file I created in txt write two equal C # files? Get ID of the clicked element

score 3 · Accepted Answer

There are two problems there.

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

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

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

See how your code got after the adjustment:

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>