I often come across questions which involve how to overlay images in a web page. The process for doing this is fairly straight forward. Three such methods are discussed in the sections below.
This method utilises CSS to position both images absolutely in the container and use CSS to set the z-index of the foreground image higher than the background image.
HTML
<div class="pngcontainer1">
<img src="images/dlbg.png" />
<img src="images/foreground1.png" />
</div>
CSS
<style type="text/css">
.pngcontainer1, .pngcontainer1 img {
position: relative;
}
.pngcontainer1 img {
z-index: 101;
}
.pngcontainer1 img:first-child {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
</style>
This method sets the background image as a background to the container and the foreground image is a normal image, inside the container.
HTML
<div class="pngcontainer2">
<img src="images/foreground1.png" />
</div>
CSS
<style type="text/css">
.pngcontainer2 {
background: url(images/dlbg.png) no-repeat 0 0;
}
</style>
Note: if your background image is larger than your foreground image you will need to specify a width and height on your container element to ensure that it expands to accommodate the background image.
This method uses CSS3 multiple background images.
HTML
<div class="pngcontainer3"></div>
CSS
<style type="text/css">
.pngcontainer3 {
background-image: url(images/foreground1.png), url(images/dlbg.png);
background-position: left top, left top;
background-repeat: no-repeat, no-repeat;
width: 132px;
height: 150px;
}
</style>
Note: with this method the width and height have to be specified in order for the image to display correctly
This method uses the PHP GD library to create a merged image that is sent back to the browser as a normal <img/> element. In the code below the <img/> src is set to a PHP script. Two parameters are passed in the URL indicating the (fg) foreground and (bg) background images respectively. The script merges the two images and sends the result back.
No CSS is required for this solution
HTML
<div class="pngcontainer4">
<img src="getimage.php?bg=dlbg.png&fg=foreground1.png" />
</div>
PHP
The code below assumes the images exist and are in the images folder relative to the script
<?php
if ($_GET) {
$bg = isset($_GET['bg']) ? 'images/' . $_GET['bg'] : false;
$fg = isset($_GET['fg']) ? 'images/' . $_GET['fg'] : false;
if (file_exists($bg) && file_exists($fg)) {
// Create image instances
$dest = imagecreatefrompng($bg);
$src = imagecreatefrompng($fg);
$wd=imageSX($dest);
$ht=imageSY($src);
// Copy and merge
imagecopymerge_alpha($dest, $src, 0, 0, 0, 0, $wd, $ht,100);
// Output and free from memory
header('Content-Type: image/gif');
imagepng($dest);
imagedestroy($dest);
imagedestroy($src);
}
}
function imagecopymerge_alpha($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct){
// creating a cut resource
$cut = imagecreatetruecolor($src_w, $src_h);
// copying relevant section from background to the cut resource
imagecopy($cut, $dst_im, 0, 0, $dst_x, $dst_y, $src_w, $src_h);
// copying relevant section from watermark to the cut resource
imagecopy($cut, $src_im, 0, 0, $src_x, $src_y, $src_w, $src_h);
// insert cut resource to destination image
imagecopymerge($dst_im, $cut, $dst_x, $dst_y, 0, 0, $src_w, $src_h, $pct);
}
A working sample of the above can be found here
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (1)
Commented:
Nice i got interesting information from this work