I've found code that lets me have text as a watermark and I'm wanting something like that but not for the page - just for the div it's attached to. The techniques I've seen all utilise ::before or ::after and absolute positioning. Here's what I get if I change it to relative This is going to be a pdf and it would have the heading repeated behind the text in pale grey. I've got a fiddle at http://jsfiddle.net/bteghy3a/ But obviously, I have some way to go. Has anyone done something like this?
Try using this idea: http://jsfiddle.net/bv9y5kc1/4/ You can wrap another div around it, if you want it to be in a div.
When I add a second div the watermarks overlay each other. The user could choose to have 6+ of these watermarks in a single document. <div class="watermark">Watermark1 here</div> <p>Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> </p> <div class="watermark">Watermark2 here</div> <p>Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> Text text text<br/> HTML: body{ background:#888; } p{ color:white; } .watermark { position:fixed; top:0; left:0; opacity:0.5; font-size:2em; z-index:-1; color:#000; } Code (CSS):
Something like this? http://jsfiddle.net/woL7efu9/3/ but the position would have to be absolute then. Maybe @deathshadow can suggest something.
Honestly I must be having some kind of comprehension issue, as nothing here I'd even call a watermark... hence for the life of me I can't even figure out what the blazes is even trying to be accomplished here. Though of course they overlap, they're position fixed which is why they're based on the top corner of the SCREEN, not the content. Did you mean to use position:absolute inside relative parent containers? Oh wait, that's what @qwikad did. You could probably lose the parent container by simply not setting ANY positioning (left/right/top/bottom) on the element. That "leaves it where it is" in the layout... in theory. http://jsfiddle.net/t1ng58hk/ A lot of people don't realize that about position:absolute. If you don't set left/right/top/bottom it's removed from flow, but stays where it is.
Right, it's watermark in name only, I am thinking if someone tries to take a screenshot it will always be there.
In which case I'd use an SVG or PNG of it as a background-image, that way it can be repeated and wouldn't interfere with non-visual appearance. That or perhaps add it with generated content and prevent its selection.
I was struggling to come up with a better word than watermark... put it down to a lack of imagination. I'm creating a form system where the client creates forms A, B, & C, users fill them in, data saved and then output as a formatted pdf (we're trying to get the length down from 12 pages). I want to be able to give a format option of having the title repeated as a pale background to break up the page and make things like the terms and conditions a bit less bleak. Because I don't know what the form consists of I can't create the images ahead of time and prefer a CSS approach to generating images on the fly. Disclaimer: I'm not a design expert, this might not fly...