Use an image as watermark in the background using CSS3
In this article, I am going to make a small HTML application that has a watermark image using CSS3.
<html>
<head>
<style>
div.image
{
width:500px;
height:250px;
background:url(images.jpg);
background-repeat:no-repeat;
background-position:center;
border:2px solid;
border-color:#CD853F;
}
div.transparentbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid;
border-color:#CD853F;
opacity:0.6;
filter:alpha(opacity=60);
}
div.transparentbox p
{
margin:30px 40px;
font-weight:bold;
color:#CD853F;
}
</style>
</head>
<body>
<div class="image">
<div class="transparentbox">
<p>This is MindStick© unlease your imaginaiton<br>
Blog by Vijay Shukla<br>
More Details Visit to www.mindstick.com
</p>
</div>
</div>
</body>
</html>
div.image
I am creating a div tag for the set background image. by the help of Height and Width I am giving the size,
by the help of background: URL set the background image, by the help of background-repeat image never repeated if image size is small,
background-position set the position of image, border: give the border which is solid, border-color: attribute is forgiven the color of the border.
div.transparentbox
By the help of this tag, we make the transparent box, margin attribute is used for the set the margin of the data,
background-color: is used to set the background color, opacity is used for giving the transparency of the box,
filter:alpha(opacity=60); is set the compatibility For IE8 and earlier.
div.transparentbox p
this is given the style of <p> tag, this will set the margin, font-weight, and font color.
After that when we open this HTML application in browser the below result will get:
Leave Comment