Как наложить фоновое градиентное изображение поверх другого бесконечного фонового изображения в CSS / HTML

Question

Итак, я пытаюсь выяснить, как наложить градиент, который повторяется или распространяется по всей нижней части экрана поверх клетчатого квадрата, который повторяется бесконечно.Я могу заставить градиент появляться вокруг таблицы, которую я уже написал для этой страницы, но он не будет распространяться на всю страницу.

То, что я написал ниже, касается того, насколько я продвинулся в этом проекте.Я вроде как новичок в коде, поэтому я был бы признателен за любую помощь, которую вы мне могли бы оказать.

<style type="text/css">

BODY{`background-image: url(image); repeat;}
div.wrapper {
background-image: url(image2.gradient); repeat-x fixed;
</style>

<div class="wrapper">
<table>

Тогда это будет продолжаться ...

Answer 1

Ваш wrapper div будет иметь размер, равный только его содержимому, поэтому вам необходимо установить высоту и ширину равными 100% для вашего wrapper класса.

div.wrapper {
  position: relative;      
  background: url(image2.gradient) repeat-x fixed;
  width: 100%;
  height: 100%;
}