Guys, I ran into a problem with the header section design. Apparently, the image and the gradient should be used, but it’s not what is shown on the layout.

Please help with the problem

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="normalize.css"> <title>Drone Zone</title> </head> <body> <header> </header> </body> </html> body { margin: 0; padding: 0; } header { width: 100%; height: 2500px; background: url(images/Layer4copy.png) no-repeat center center, linear-gradient(to right, rgb(203, 0, 53), rgb(224, 105, 53)); background-size: cover; }

myResult Photoshop

    1 answer 1

    To realize the use of both the gradient and the background for one element at the same time, it is necessary to pay attention to the background property itself:

     header { background: url(images/Layer4copy.png) no-repeat center center, linear-gradient(to right, rgb(203, 0, 53), rgb(224, 105, 53)); }

    First, when two or more backgrounds are specified, the one that is displayed on top of the others, and the last, respectively, the lowest is specified first. In your case, the gradient should overlap the image, that is, it must be specified first.

     header { background: linear-gradient(to right, rgb(203, 0, 53), rgb(224, 105, 53)), // градиент должен покрывать изображение, поэтому его значение задаётся первым url(images/Layer4copy.png) no-repeat center center; }

    Secondly, to make the image visible under the gradient, you need to add opacity to it, that is, you need to set the color using rgba ().

     header { background: linear-gradient(to right, rgba(203, 0, 53, 0.5), rgba(224, 105, 53, 0.5)), // допустим, необходима 50% непрозрачность url(images/Layer4copy.png) no-repeat center center; }