Не работает фоновый градиент для body (css)

Question

Хочу задать градиент как фон для всей страницы в элементе body: Если просто задать обычный цвет, работает корректно, в отличии от градиента, он не отображается. Если закомментировать элемент div заработает.

* {
  margin: 0;
  border: 0;
}

body {
  background: linear-gradient(to right, red, blue);
}

.header {
  background-color: #4c72b0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30%;
  border-radius: 5%;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <title>test</title>
  <link rel="shorcut icon" href="../media/icon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../css/index.css" />
</head>

<body>
  <header>
    <div class="header">
      <a href="screenshots.html" target="_blank">Screenshots</a>
    </div>
  </header>
</body>

</html>

Answer 1

В header у вас background-color: #4c72b0; стоит и перекрывает градиент, я поставил transparent, что бы вам было видно изменения.

{
    margin: 0;
    border: 0;
}

body {
    background: linear-gradient(to right, red, blue);
}

.header {
    // background-color: transparent;
    background-color: rgba(76, 114, 176, 0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding:30%;
    border-radius: 5%;
}

<html lang="ru">
    <head>
        <title>test</title>
        <link
            rel="shorcut icon"
            href="../media/icon.ico"
            type="image/x-icon"/>
        <link
            rel="stylesheet"
            href="../css/index.css"/>
    </head>
    <body>
        <header>
            <div class="header">
                <a
                    href="screenshots.html"
                    target="_blank">Screenshots</a>
            </div>
        </header>
    </body>
</html>

БЛОГ НА HUSL

Не работает фоновый градиент для body (css)

Ответы (1 шт):