Как сделать так, чтобы фоновый градиент заполнял всю страницу?

Я только недавно начал изучать HTML/CSS, и я довольно смущен тем, как сделать этот линейный градиент, который у меня есть для фона, подходящим для всей страницы. Я ковырялся, и я не могу найти нить, которая соответствует моей конкретной ситуации.

В настоящее время я установил его так, чтобы градиент заполнил всю область просмотра, а также масштабировался с размером окна браузера. Тем не менее, мне любопытно узнать, как сделать так, чтобы градиент не следовал за мной, где бы я ни прокручивал окно просмотра, а чтобы весь градиент заполнял страницу (за окном просмотра, не блокируя окно просмотра или следуя за мной, где бы я ни прокручивал) .

Итак, если бы вы, например, прокрутили вправо до упора, вы бы увидели, какой будет «крайняя правая» область градиента, а не просто весь градиент, который я установил (или повторяющийся градиент). Извините, если я не ясен. Спасибо за уделенное время.

<head>
    <style>
        html {
            height: auto;
        }

        body {
            background-image: linear-gradient(to bottom right, pink, white);
            height: auto;
            background-attachment: fixed;
            background-size: cover;
        }

        div {
            display: inline-block;
            height: 100px;
            width: 100px;
        }

        .blue {
            background-color: blue;
        }

        .yellow {
            background-color: yellow;
        }

        .red {
            background-color: red;
        }

        .magenta {
            background-color: magenta;
        }

        .sand-brown {
            background-color: rgb(214, 176, 93);
            /*height: 5000px;*/
            width: 5000px;
        }

        .sand-brown2 {
            background-color: rgb(214, 176, 93);
            height: 5000px;
            /*width: 5000px;*/
        }
    </style>
</head>

<body>
    <div class="blue"></div>
    <div class="yellow"></div>
    <br>
    <div class="red"></div>
    <div class="magenta"></div>
    <br>
    <div class="sand-brown"></div>
    <div class="sand-brown2"></div>

</body>

</html>

html css linear-gradients viewport
person minorproblem    schedule 30.09.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Проблема, с которой вы сталкиваетесь здесь, - это переполнение. Ваш элемент переполняет тело, а размер градиента соответствует размеру body, затем он распространяется на корневой элемент и повторяется. Чтобы избежать этого, вам может понадобиться добавить еще один контейнер, который вы сделаете inline-block.

.container {
  background-image: linear-gradient(to bottom right, pink, white);
  display: inline-block;
}

.container > div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.magenta {
  background-color: magenta;
}

div.sand-brown {
  background-color: rgb(214, 176, 93);
  /*height: 5000px;*/
  width: 5000px;
}

div.sand-brown2 {
  background-color: rgb(214, 176, 93);
  height: 5000px;
  /*width: 5000px;*/
}
<div class="container">
  <div class="blue"></div>
  <div class="yellow"></div>
  <br>
  <div class="red"></div>
  <div class="magenta"></div>
  <br>
  <div class="sand-brown"></div>
  <div class="sand-brown2"></div>
</div>

person Temani Afif    schedule 30.09.2018
comment
Да! Это то, что я искал. Не могли бы вы подробнее рассказать о том, в чем проблема? Я не совсем понимаю, зачем добавлять элемент встроенного блока, чтобы содержать все эти элементы, и градиент делает это так. Кроме того, почему изменение div.sand-brown на просто .sand-brown делает все по-другому? Если я все равно применяю эти песочно-коричневые классы к элементу div, разве эти 2 класса не означают в данном случае одно и то же?? - person minorproblem; 01.10.2018
comment
@minorproblem (1) встроенный блок, в отличие от блочного элемента, будет соответствовать своему содержимому (ширина = ширине содержимого), а блочный элемент всегда имеет ширину 100%, поэтому элемент выходит за пределы тела, НО новый контейнер расширяется, чтобы соответствовать его содержимому (2) для классы - это вопрос специфики, я добавил div, чтобы сделать его более конкретным, чем .container > div, потому что этот устанавливает высоту и ширину, и использования только класса недостаточно, чтобы переопределить его, вам понадобится как минимум класс + элемент - person Temani Afif; 01.10.2018

arrow_upward
2
arrow_downward

Вам нужно указать атрибут градиента для элемента html вместо элемента body.

Итак, вместо этого:

<head>
<style>
    html {
        height: auto;
    }

    body {
        background-image: linear-gradient(to bottom right, pink, white);
        height: auto;
        background-attachment: fixed;
        background-size: cover;
    }

У вас должно быть это:

<head>
<style>
    html {
        height: auto;
        background-image: linear-gradient(to bottom right, pink, white);
    }

    body {
        height: auto;
        background-attachment: fixed;
        background-size: cover;
    }

Это то, что вы искали?

person Miloš Macura    schedule 30.09.2018

arrow_upward
1
arrow_downward

Вы можете использовать настройку background-size, которая достаточно велика, чтобы охватить весь ваш контент, например background-size: 5100px 5500px; в вашем случае:

body {
  background-image: linear-gradient(to bottom right, pink, white);
  background-size: 5100px 5500px;
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.magenta {
  background-color: magenta;
}

.sand-brown {
  background-color: rgb(214, 176, 93);
  /*height: 5000px;*/
  width: 5000px;
}

.sand-brown2 {
  background-color: rgb(214, 176, 93);
  height: 5000px;
  /*width: 5000px;*/
}
<div class="blue"></div>
<div class="yellow"></div>
<br>
<div class="red"></div>
<div class="magenta"></div>
<br>
<div class="sand-brown"></div>
<div class="sand-brown2"></div>

person Johannes    schedule 30.09.2018