Add a text watermark in print mode with css that works for all major browsers?
I'm trying to add a simple text watermark that I want to display for every page it will print on and looks sane in Firefox, IE and Chrome. I went through all the related topics I could find and applied the suggested answers, but to no avail. Or it looks fine on every page, but doesn't appear on the first page (Firefox). Or it only shows up on the first page (Chrome). Or not displayed at all.
I was wondering if there is a standard way to create css watermarks that works for all browsers that I might have missed?)
For those wondering what my html / css looks like at the moment:
<div class="watermark">This is a watermark!</div>
@media print {
.watermark {
display: inline;
position: fixed !important;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
top:700x;
right:5px;
}
}
Any help is greatly appreciated!
Edit: This isn't just for image watermarks, otherwise as I suggested using an image editor. This is for watermarking pages of document content (sections of text of different sizes).
source to share
You cannot do this in css, simply because it won't work.
Think about it, user just removes your css, gets your image url and copies images without watermark. Right click "Save Image URL", also bypass the css.
There are two good ways to add watermarks that are fault tolerant.
Edit Actual Images
If you have control over the images, for example, if you are building a portfolio of photos, simply process them in your image editor and add watermarks before uploading them to the Internet.
It's a good idea because then your images are ready to use with watermarks no matter where you use them, so they are ready for social media / promo packs, etc.
Do it on request
Set up a .htaccess rule that intercepts any image requests and redirects them through some server side code that uses an image processing library to add a watermark and return binary image data. You can cache the watermarked image with a hash and check the watermarked version first, which will allow you to bypass the processing.
This means that any request for an image, whether it comes from css, HTML, or a direct url, will serve as a watermark. Use some logic to skip over any images used to decorate your site, or you'll end up with watermarks in unexpected places!
The advantage is that the original image is untouched, if you update your watermark, possibly as part of a rebrand, you won't need to update all of your images.
Another advantage of this approach is that you can apply it to any images, even if you don't create them - for example, if you have users uploading images to your site. That being said, be careful before you start watermarking, make sure you have the right to watermark the image.
source to share
The real problem is what you need .watermark
at the bottom of every printed page, but CSS has no idea about those printed pages.
The best you can probably do is use the page-break-after attribute to force a page break at certain points, then you can position your watermark in front of that.
Something like (untested):
@media all {
.watermark {
display: none;
background-image: url(...);
float: right;
}
.pagebreak {
display: none;
}
}
@media print {
.watermark {
display: block;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
<body>
some content for page 1...
<div class="watermark"></div>
<div class="pagebreak"></div>
some content for page 2...
<div class="watermark"></div>
<div class="pagebreak"></div>
</body>
Indeed, I think these 2 classes can only be the same element, but it looked more clear in code.
It is of course worth pointing out here that you need to manually specify where the page break occurs, and if realistically, if someone prints your web page on a 4 "x6" notecard, it will be radically different from standard sized paper. Still, this is a step in the right direction.
source to share
cause of the problem . printing does not support background image.
This is my decision. 1. Absolute position for main elements (div must be printed). 2.add element
<style>
.mainContend{
position: absolute;
top: 0;
}
.watermark{
opacity: .8;
}
</style>
<script>
var addWatermark = function () {
var bodHeight = document.body.scrollHeight;
//imge size is 1000*400px
var imgNum = Math.floor(bodHeight/400) ;
var template = '<img src="../img/icon/watermark.png" class="watermark">';
var innerHTML;
//create image number
for(var i = 0;i < imgNum;i++){
innerHTML +=template;
}
// innerHTML.appendTo("#reportContent);
$("#reportContent").append(innerHTML);
}
window.onload = addWatermark;
</script>
<div id="reportContent">
<div class="mainContend" id="mainContend">
content reportContentreportContentreportContent
</div>
</div>
source to share