Overlay Images - September 2012
Updated January 2016

If you download this tip please consider making a modest donation.

I needed a way to overlay a 'play video' button onto a video thumbnail. I could not find any code on the web that would do that. So with some inspirational code I used it to create a class module I call cOverlayImages.vb. The process is described in this September 2012 tip-of-the-month. I created an Asp.Net, VB.Net application to demonstrate the process. Click here to run the demo.

2016/01/05 - I updated the demo to accept an offset. Use the offset to move the foreground image around on the background image. Useful if the foreground image would hide meaningful background information. See below for details.

The Demo Application

The Asp.Net, VB.Net, VS/2008 project OverlayFGontoBGImage is documented here.

Input Entries

Foreground Image - Browse for an image that will overlay the background image. In this case a 'play video' button is selected.

Offset Foreground Image - New 2016/01/15 - Enter a positive or negative top or left percentage offset to move the foreground image. If zero is used then the foreground image is centered over the background image. Any other value from 1 to 100 percentage causes the foreground image to be offset by the indicated percentage. In the example above the foreground image is moved down and to the right by 50%.

Background Image - Browse for a background image. This image will be overlaid with the foreground image. The foreground image is centered or offset on the background image. An error message is issued if the foreground image is larger than the background image.

Add Suffix - This suffix is appended to the filename of the background image. For example KitesPromo.jpg becomes KitesPromo_Combined.jpg.

Combined Image - This is the created virtual name of the combined image.

Make It - Click this button to create the combined image.

The combined image with an offset foreground image.

Click here or the thumbnail image to play a YouTube video of the
Lincoln City, Oregon, Summer Kite Festival.

Download - Click this button to download the combined image to your computer. I have found that I need to save the image rather than to try to open it.

Inspirational Code

I found some code on the web that inspired this tip. Click here to view that code.

Download the VB.Net Code

Download the source code by clicking on the zipped file name. Click here to run the demo application.

Download - Source Zipped File Size
VS/2008 VB.Net, ASP.Net Solution OverlayFGontoBGImage.zip 479k

Previous Tip    Tip Index    Next Tip


Updated 2016/01/05