---
title: "Use image as watermark in background using CSS3"
description: "In this article I am going to make a small HTML application which has a watermark image using CSS3."
author: "Vijay Shukla"
published: 2012-12-16
updated: 2020-09-22
canonical: https://www.mindstick.com/articles/1081/use-image-as-watermark-in-background-using-css3
category: "css-css3"
tags: ["css-css3"]
reading_time: 2 minutes
---
# Use image as watermark in background using CSS3
Use an image as watermark in the background using CSS3\
In this article, I am going to make a small HTML [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) [that has a watermark image using](https://www.mindstick.com/Articles/267/ajax-toolkit-hovermenuextender-control-in-asp-dot-net) CSS3.
```
This is MindStick© unlease your imaginaiton
Blog by Vijay Shukla
More Details Visit to www.mindstick.com
```
##### div.image
I am creating a div tag for the set [background image](https://www.mindstick.com/forum/505/how-do-i-have-a-background-image-that-isn-t-tiled). 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](https://www.mindstick.com/blog/61/ado-dot-net-object-model-and-attributes) is forgiven the color of the border.
##### div.transparentbox
By the help of this tag, we make the [transparent](https://answers.mindstick.com/qa/92940/which-platform-launched-for-transparent-taxation-in-2020-india) box, margin attribute is used for the set the margin of the data,
background-color: is used to set the [background color](https://www.mindstick.com/forum/18/split-background-color), opacity is used for giving the [transparency](https://www.mindstick.com/articles/336962/how-blockchain-technology-be-applied-to-improve-transparency-in-industries) of the box,
filter:alpha(opacity=60); is set the [compatibility](https://www.mindstick.com/blog/303291/best-practices-for-working-with-host-apis-security-compatibility-and-performance-considerations) For IE8 and earlier.
#### div.transparentbox p
this is given the style of tag, this will set the margin, font-weight, and font color.
After that when we open this HTML application in [browser](https://www.mindstick.com/articles/323165/top-10-fastest-internet-browsers-in-the-world) the below result will get:
---
Original Source: https://www.mindstick.com/articles/1081/use-image-as-watermark-in-background-using-css3
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.