3 replies [Last post]
Leifoet
Leifoet's picture
Offline
newbie
Last seen: 2 years 41 weeks ago
Timezone: GMT+2
Joined: 2016-09-21
Posts: 2
Points: 3

This css-code prints a watermark at the top of my webdocument (document = a SELECT SQL from an Access database) :

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;
}

How can i change the settings/code to become the following
=> to change the size (height - width) of the printed watermark-image ?
=> how can I get the watermark also at the bottom - or even also in the middle of the document ?

My attempts are not successful - possibly also the code is not optimal?
Are there better codes to achieve this?

Thanks for help - Leifoet

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Leifoet, Have a look into

Hi Leifoet,
Have a look into background-size and background-position
https://csscreator.com/content/background-size
https://csscreator.com/content/background-position

ramcom
ramcom's picture
Offline
Regular
Belgium
Last seen: 2 years 41 weeks ago
Belgium
Timezone: GMT+2
Joined: 2016-09-28
Posts: 13
Points: 16

css #watermark{

css

#watermark{
   background:url(images/watermark.png) no-repeat; 
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}
#image{
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}

html

<div>
<div id="image"><img src="..." /></div>
<div id="watermark"></div>
</div>

Leifoet
Leifoet's picture
Offline
newbie
Last seen: 2 years 41 weeks ago
Timezone: GMT+2
Joined: 2016-09-21
Posts: 2
Points: 3

How to insert a watermark at the top and also at the bottom of a

Hi Tony
I inspired me on https://csscreator.com/content/background-size and tried this

div{
height:300px;
background:url(/images/logos/FOCO-logo_new.gif) no-repeat 25% 90%;
opacity: 0.3;
margin: 0em;
}
#three{background-size:contain;
}

I am looking to solve the following problems
(1) the opacity affects also the text - I want the text remaining readable - only the image must be a real 'watermark'
(2) 25% 90% i do not understand the function of this % - how can I set the position of the watermark image (how at the top - how e.g. at tht bottom of the text - and how to define the size of the image ?

Thanks Tony for help - Leifoet