The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE.

<style type="text/css">
#watermark {
  color: #d0d0d0;
  font-size: 90pt;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 100;
  opacity: 0.5;
}
</style>

<div id="watermark">
<p>WaterMark</p>
</div>

Is there any solution to ensure the watermark appears on all pages?

Check out this fiddle for reference: http://jsfiddle.net/gskzkb8g/

Answer №1

It seems like the issue lies with the CSS rule position:fixed. Since the web does not have built-in pagination, it functions as one continuous page. While the position: fixed element remains in view while scrolling, it may only display once when printing from Chrome.

Based on my understanding, achieving what you are attempting may not be feasible. You can also reference this response on Stack Overflow for further insight:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminating Redundant CSS Code Using PHP Storm

After upgrading to PHP Storm version 8.03, I came across an article that discussed the ability to search for duplicate CSS code using this link: . Although I have tried to find a way to automatically resolve these duplicate codes within PHP Storm, I have ...

Troublesome glitches in jQuery?

I'm having an issue with the following code: var buggy_brand_name = ['Baby Jogger', 'Babyzen', 'Bugaboo', 'GB', 'Icandy', 'Joie', 'Maclaren', 'Mamas&Papas', 'Ma ...

Building New Web Pages with Express in Node.JS

I want to dynamically generate a new page on Node.JS with Express upon user form submission. Here is my initial approach, but it's not working as expected: var app = require('express')(); var server= require('http').createServer(a ...

Having an issue where the Jquery clone function is only duplicating the content once. Looking to

I'm currently working on existing HTML table code. My goal is to copy the text from the 'th' header rows and paste them inside the corresponding td cells for each subsequent row. While I have successfully managed to copy the header row, it o ...

I'm having trouble figuring out why my Vue method isn't successfully deleting a Firebase object. Can anyone offer some guidance

What I am trying to achieve: I have been struggling to use the remove method from Firebase. I have read the documentation, but for some reason, it is not working as expected. Retrieving data using snapshot works fine, but when I try to delete using the re ...

Creating Eye-Catching Images by Incorporating Image Overlays Using Just One Image

I'm facing a bit of a challenge here. I need to figure out how to overlay an image onto another image using just a single image tag. Specifically, I want to add a resize icon to the bottom right corner of an image to let users know they can resize it ...

The inner nested ng-repeat section is not properly binding to the scope variable and appears to be commented out

In my code, there is a nested ng-repeat set up. The 'boards' variable in the scope is an array that contains another array called 'tasks', which also consists of arrays. In the innermost ng-repeat, I am attempting to bind to task.conten ...

Columns filled with fluid content along with one column set to a maximum width

Currently, I am attempting to create a two-column layout with specific dimensions for each column. The first column should have a maximum width of 200px while the second column expands to fill the remaining space. Despite trying out multiple examples, I h ...

Can I position two div elements next to each other, with one div partially offscreen, without utilizing display none or setting its width to zero?

Is it possible to position one div outside of the screen width while setting two divs side by side? I am looking to insert DIV2 above DIV1 with animation without adjusting its width or display. The goal is for DIV2 to enter the screen from the side alread ...

Next.js Pre-rendering Issue: Error encountered when trying to access properties of a null object

Using Next.js for a React application (full code available here.) Encountering an unusual error while running next build, showing errors related to prerendering on five pages: spenc@WhiteBoxu:~/workout-tracker$ next build info - Loaded env from /home/spe ...

Unable to extract certain features from Zillow's website

My current project involves extracting data from the Zillow website. For example, check out this link: I've encountered an issue while attempting to scrape the price and tax history sections. It seems that these elements are loaded using JavaScript ...

Tips for safeguarding primary design elements from modifications by user-contributed styles in a text entry box

Currently utilizing Wordpress, but I believe my inquiry pertains to any platform where users are granted frontend posting capabilities. I am interested in enabling users to customize the style of their posts, specifically limited to the description area. ...

JavaScript: Dynamically load a script when a particular <a> element is in an active state

<script> function DisplayTag(){ var q1=document.getElementById( 'ctl00_ContentPlaceHolder1_ctl00_ctl00_Showcase' ).childNodes[1].innerHTML; var counter1=0; function executeScript(q1,counter1){ q1= document.getElementById( 'ctl00_Co ...

Failed to cast value "undefined" to ObjectId in the "_id" path for the model "User"

I've been encountering an issue that I can't seem to resolve despite searching on Stack and Google. My ProfileScreen.js is meant to display a user's profile, but when attempting to view the profile, I receive this error: "Cast to ObjectId fa ...

Awesome method of redirecting outdated URLs to the most recent established URL

My website heavily relies on JavaScript and communicates with a .NET C# RPC service. We encountered an issue where clients' browsers cached the JavaScript, so we decided to add a version number to the URL in order to force them to use the latest JavaS ...

Production environment poses a challenge as Rails 4 struggles to locate fonts

Situation: I am facing an issue with my Rails 4.0.0 application deployed using capistrano, where the asset precompilation does not work properly on my production server. Challenge: Despite successfully adding a font and using it with @font-face locally, t ...

What is the best way to align all of my content to the center in HTML?

In my web design class, I encountered an issue while creating a page. Currently, my page consists of a navigation bar and an image. I wanted to center both elements using CSS. display: block; margin-left: auto; margin-right: auto I applied this CSS to th ...

Retrieve the ngModel's current value

One of the challenges I encountered is with a textarea and checkbox interaction. Specifically, once the checkbox is checked, I aim to have the value appear in the textarea. <div class="message-container"> <textarea *ngIf="mode === 1" ...

I am looking to personalize a Material UI button within a class component using TypeScript in Material UI v4. Can you provide guidance on how to achieve this customization?

const styling = { base: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', border: 0, borderRadius: 3, boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', color: 'white', height: 48, ...

The challenge of removing an event listener

There are three Div elements with a box appearance. When the user clicks on any div, a copy of that div will be added to the end. The original clicked div will no longer be clickable, but the new div will be. This process can repeat indefinitely. I attemp ...