July 2020: This post is archived - since I moved to Gridsome some of the formatting is messed up. This is on my todo list to update.

Overlay photos to stunning mosaic either in tile or in interlace with ease. Tweak the column count, tile size, and match color for overlapping photos. Create mosaic photos with JPEG and PNG with transparency background. Save the overlapping photos in an extremely high quality for printing. Step 1: Select the photo as background. Overlap is a problem with the back, and means the back needs a thorough CLA by a competent Hasselblad technician. The two I would recommend are David Odess and Hasselblad (New Jersey). You will also get overlap if you thread the film incorrectly. It should go under the little tab on the pressure plate.

Adding a background image to a <div> (or any other tag) is easy using CSS. Here it is (without gradient yet - scroll down for the gradient image css):

I've put some other rules on the div to set the background image to fill the whole div (cropping if needed) with the background-size: cover. The width is 80%, so resize your browser to see how this background-size works. (It will crop the image to ensure it fits correctly).

How to add a gradient on top of a background image?

If you wanted to add a semi opaque/semi transparent colour gradient that goes on top of the background image, your first thought might be to overlay another div (or use the :after css selector).

However, the easiest way to do it is to just add another parameter to the background-image css rule.

Before And Aftercompare Images Through Overlap Walls

Take a look!

Both divs are using the same background image, but the second one has a linear-gradient on it. The rgba(x,y,z,o) is the colour (first three numbers = red/green/blue. The 4th param (0.52) is the opacity - 1.0 is fully visible, 0.0 is invisible).

Before And Aftercompare Images Through Overlap Objects

How to add a gradient background to a div without using images

You can also easily add a gradient background to a div (or any other HTML element) without using images, using the following CSS rules.

BTW, I've set the gradient to start at red and end in blue. It might not look pretty, but it is so you can click the buttons below to swap its position, and quickly work out what direction it is facing.