Wed, 2016-09-21 15:18
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
Thu, 2016-09-22 07:49
#1
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
Wed, 2016-09-28 12:13
#2
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>
Fri, 2016-09-30 15:46
#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