Most of you that work with CSS and HTML are aware that you have no control over printing backgrounds and images, that is totally up to user to decide and there is no way to force printing. There is however a trick you can use to display what appears to be a background but it really isn’t.

Let’s say you want to make a square 100px wide and 50 px high. Normally you would use following code:


.square{
width:100px;
height:50px;
background-color:#D1DCEB;
}

You will get a square that looks like this:

But if you go to file/print preview on your browser you will notice that by default printing images and backgrounds is disabled. And since many users do not know about this, some of your reports might not look like you would like. So you are forced to design it differently or you can use the following trick. Change the code to:


.square{
width:100px;
height:0px;
border-top:50px solid #D1DCEB;
}

As you will note square looks the same and will now also appear in print preview and printing itself.
Hope you enjoyed reading about this CSS trick.