How to keep a watermark at the background of a web page?

问题

I am a pega developer never spend a lot of time in working on webpage.I want to create a pdf .In Pega that will be created from a html page.i need to keep the wate mark draft as background?

I tried following code but when im including it in my code it is creating as separate div and next divs are coming on the next page?and also the draft is not coming in the background middle ?`

<div style="position:absolute;z-index:0;background:white;display:block;min-height:50%; min-width:50%;color:yellow;">

<p style="color:steelblue;font-size:120px;">DRAFT</p>
</div>

回答1:

This is another way. hope this helps

div{
    position: relative;
    z-index: 0;
    background: white;
    display: block;
    min-height: 40%;
    min-width: 100%;
    color: yellow;
    border: 2px solid black;
    height: 200px;
}

p{margin:0}

div:after{
    content: "DRAFT";
    color: steelblue;
    font-size: 120px;
    /* text-align: center; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity:0.1
}

<div >


</div>

回答2:

Try setting a background-image in the CSS

body {
  background-image: url('https://example.com/image.jpg');
}

or in the HTML as so

<body style="background-image: url('https://example.com/image.jpg');">

回答3:

Use CSS to give the body the background:

body{
  background-image: url('../watermark.png');
  background-size: contain; /* Make background take entire page */
  background-position: center; /* Center Background */
}

来源：https://stackoverflow.com/questions/54435445/how-to-keep-a-watermark-at-the-background-of-a-web-page

标签

html

css

image

watermark