LateX – Transparent Watermark Image

If you want to add a watermark image to your LaTeX document, you can achieve it easily using three packages: graphicx, tikz and eso-pic:

Graphicx package allows to load images into documents. If you want to add transparency to your image, you need also to use tikz package. Tikz is used for producing vector graphics from a geometric/algebraic description, but is also allows to play with opacity levels.

Eso-pic package provides hooks to inserts the images on one or more pages as a background (in other words – a watermark).

\\usepackage{graphicx}
\\usepackage{tikz}
\\usepackage{eso-pic}

\\newcommand\\BackgroundPicA{\\put(270,440){{%
\\begin{tikzpicture}\\node[opacity=0.1]{%
\\includegraphics[scale=0.80]{letter-watermark.jpg}};%
\\end{tikzpicture}%
}}}

\\newcommand\\BackgroundPicB{\\put(-80,-40){{\\reflectbox{%
\\begin{tikzpicture}%
\\node[opacity=0.1]{%
\\includegraphics[scale=0.80]{letter-watermark.jpg}};%
\\end{tikzpicture}%
}}}}

\\makeatletter%
\\AddToShipoutPicture{\\BackgroundPicA}%
\\AddToShipoutPicture{\\BackgroundPicB}%
\\makeatother

\\begin{document}
.
.
\\newpage
.
.
\\end{document}

I have attached a final result as PDF, so you can see the output: PDF with semi-opaqued watermark.

CSS Modal Dialog With Semi Transparent Border

Few days ago I was working on UI for one of my projects. I needed to create a pop up dialog with semi opaque background around it, something like Facebook has.  Since my CSS skills are not too powerful, I turned to Google to look for a tutorial(s).

Many resources that I have found, make use of images when creating semi transparent background around dialogs. I did not want to do that, I wanted to make use of pure CSS. It did take me quite a few hours to find what I wanted to do.

Finally, after reading a number of tutorials on the Internet, I have came up with a solution that did what I wanted.

The following is a screen shot of my pop-up using Firefox:

Firefox  - dialog with semi opaque background using pure CSS

Firefox - dialog with semi opaque background using pure CSS

The following is a screen shot of my pop-up using Internet Explorer:

Internet Explorer - dialog with semi opaque background using pure CSS

Internet Explorer - dialog with semi opaque background using pure CSS

The following is a code snippet from a test page that I did. Its an example of HTML structure of DIVs that create the popup. The CSS styles are located in the head section of the test page. jQuery is also included (it adds some minor effects, plus its centers the popup in the middle of the screen). Its pretty straight forward, so just download, unzip and run it. I have tested the popup in Firefox, IE6,IE7, Safari (Win) and Google Chrome, so I can say it works fine in all major browsers.

<div id="dialog-box-parent-container">
	<div id="dialog-box-transparent-background" class="opacity-70 box-round-all-8px"></div>
	<div id="dialog-box-header" class="box-round-top-4px">
		<h2 class="box-round-top-4px">
			<span class="dialog-box-header-content">Action Completed</span>
		</h2>
	</div>
	<div id="dialog-box-content" class="box-round-bottom-4px">
		<div id="dialog-box-text">blah blah blah</div>
		<div class="dialog-box-buttonpane">
			<a class="dialog-box-button">Okay</a>
		</div>
	</div>
</div>

I hope this example provides you enough information how to create modal popup dialog using pure CSS. The source code is attached: jquery modal dialog with semi-opaque border

Please let me know if you have any questions,

Cheers