Как наложить полное тело веб-страницы на сплошное изображение (сверху)

Я хочу покрыть всю область тела (произвольное тело) файлом изображения, растянутым, чтобы покрыть его. Я пытался использовать фон, но даже с z-index, который, кажется, не так.

Я попробовал ниже, но это просто толкает настоящую веб-страницу вниз.

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
          .box {
            width: 100%;
            height: 100%;
            z-index: 999;
            background-size: 1%;
            background-repeat: repeat;
          }
        </style>
      </head>
      <body>
        <div>
          <img src="solid-white.png" class="box" />
          <div>ajldfskaf</div>
        </div>
      </body>
    </html>

Всего 2 ответа


Используйте этот CSS (дополнительный элемент не требуется):

body { position: relative; }
body::before {
  content: "";
  background-image: url(path/to/your/solid-white.png);
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Попробуй это :

 let newDiv = document.createElement("DIV"); newDiv.setAttribute("id", "hide"); document.body.appendChild(newDiv); document.getElementById("hide").style.zIndex = "9"; document.getElementById("hide").style.width = "100%"; document.getElementById("hide").style.height = "100%"; document.getElementById("hide").style.backgroundImage = "url('https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2018/05/22224952/beagle-puppy-in-large-cushion-chair.jpg')"; document.getElementById("hide").style.backgroundRepeat = "no-repeat"; document.getElementById("hide").style.backgroundSize = "cover"; document.getElementById("hide").style.top = "0"; document.getElementById("hide").style.position = "fixed"; document.body.style.margin = "0"; document.body.style.padding = "0"; 


Есть идеи?

10000