Home > DeveloperSection > Articles > Use image as watermark in background using CSS3

Use image as watermark in background using CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 23765  View(s)
Rate this:

Use image as watermark in background using CSS3

In this article I am going to make a small HTML application which 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 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 for give the color of border.

div.transparentbox

By the  help of this tag we make the transparent box,  margin attribute is use for the set the margin of the data, background-color: is use for set the back ground color, opacity is use for give 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:

Use image as watermark in background using CSS3


Don't want to miss updates? Please click the below button!

Follow MindStick