Question

Not sure if its possible but no harm asking.

I have a page which shows an invoice. There is an option to void the invoice via a button. What I want is to do create a watermark effect across the page but it has to be on top of the page content.

I tried using image and CSS background on the invoice container DIV element but that will be hidden if by the invoice content itself. Below is the CSS styles I am using for the class

background-image:url(/images/icons/void.png); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:35% 55%;

If anyone has any solution, either CSS or Javascript, … it will be appreciated. Thanks again.

Answer 1

Simple CSS

#voidBox {
    position : absolute;
    top : 20px; /*Change to Desired Position from top of screen*/
    left : 20px; /*Change to Desired Position from left of screen*/
    z-index : 1000; /*Sets element above everything else (only works on absolute and fixed position elements)*/
    background : url('/images/icons/void.png') no-repeat;
    display : none;
}

Then when the button is pressed, do some simple JS

document.getElementById('voidBox').style.display = 'block';