How to insert more than one watermark

[leifoet]

This css-code prints a watermark at the top of my document:

<style>
div {
width: 880px;
height: 100%;
display: block;
position: relative;
repeat: no-repeat;
}

div::after {
content: "";
background: url(myimage.gif) no-repeat;
opacity: 0.3;
top: 3%;
left: 20%;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}
</style>

How can i change these settings/code to become the following
=> change the size (height - width) of the printed watermark-image
=> how can I get the watermark also at the bottom (bottom) - or even also in the middle of the document (possibly with different images ?)
My attempts are not successful - possibly also the code is not optimal ?

Thanks for help - Leifoet

 

[feherke]

Hi

Is this for use only on your own machine ? Otherwise I see no reason for it as by default FireFox and Chrome not print background images.

With this kind of CSS trick you can add at most 2 "watermarks". The current one being set on [tt]::after[/tt] pseudo-element, you can set another one on [tt]::before[/tt].


Feherke.
feherke.ga

 

[leifoet]

I use the watermark-code in a website - tested before in desktop Windows Edge, desktop Chrome and Android Chrome: successful.

Now also inserted new 'before' code (as proposed by feherke) to become also the same watermark-image on the bottom of the document :

div::before {
content: "";
background: url(myimage.gif) no-repeat;
opacity: 0.3;
top: 90%;
left: 20%;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}

Not successful => watermark only at the top (as before)
Code not OK ?

Other possibilities or tips ?
Thanks - Leifoet

 

[feherke]

Hi

When in doubt, set borders to see what you got :

https://jsfiddle.net/wtLg7waL/2/

As you can see, the [tt]::before[/tt] and [tt]::after[/tt] pseudo-elements are like dynamically generated element which your CSS places over the base element. The [tt]background[/tt] you set can appear somewhere inside those pseudo-elements. As you specified no positioning for the background, will default to the top left corner.


Feherke.
feherke.ga

 

[leifoet]

I note that my code is identical to the code in

https://jsfiddle.net/wtLg7waL/2/;

therefore this should succeed also... but in my document I only see the top watermark - not the bottom one.

The document/list (in which the bottom-watermark should appear) is generated by an SQL select query (from an Access database);
in your exemple in

https://jsfiddle.net/wtLg7waL/2/,

however, the 'document' is static (?).

Could this be a (the) problem to determine 'the bottom' ?
If so, how to solve ?
Thanks - Leifoet

 

[feherke]

Hi

From the browser's point of view there is no such thing like static or generated. Though is possible that other parts of your document/style/script are interfering somehow.

But as since version 9 even Explorer can use multiple backgrounds let us try that way :

http://jsfiddle.net/wtLg7waL/3/

Feherke.
feherke.ga

 

[leifoet]

I see the watermark at the top, not only in your expample

http://jsfiddle.net/wtLg7waL/3/

but also in my document;
the image of the 2nd url overlaps perfect the first => I see only one (=at the top)
I tested it also with my own image in the second url => both images only at the top.

Other options ?
Thanks for help - Leifoet

 

[feherke]

Hi

Sorry, at this point I left without ideas. Will need to see the entire HTML and CSS as the browser gets them. ( So as they are visible in the browser's View Source command. )


Feherke.
feherke.ga