Как наложить полное тело веб-страницы на сплошное изображение (сверху) - PullRequest
0 голосов
/ 18 мая 2019

Я хочу покрыть всю область тела (произвольное тело) файлом изображения, растянутым, чтобы покрыть его. Я пытался использовать фон, но даже с 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 ]

1 голос
/ 18 мая 2019

Используйте этот 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;
}
0 голосов
/ 18 мая 2019

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

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";
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...