INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

How to insert more than one watermark

How to insert more than one watermark

(OP)
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

RE: How to insert more than one watermark

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 ::after pseudo-element, you can set another one on ::before.

Feherke.
feherke.ga

RE: How to insert more than one watermark

(OP)
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



RE: How to insert more than one watermark

Hi

When in doubt, set borders to see what you got : https://jsfiddle.net/wtLg7waL/2/

As you can see, the ::before and ::after pseudo-elements are like dynamically generated element which your CSS places over the base element. The background 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

RE: How to insert more than one watermark

(OP)
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



RE: How to insert more than one watermark

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

RE: How to insert more than one watermark

(OP)
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

RE: How to insert more than one watermark

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close