<

Learn how to a build a cloud-first strategyRegister Now

x

4 Methods for creating image overlays in HTML using CSS and PHP GD2

Published on
6,400 Points
2,400 Views
5 Endorsements
Last Modified:
This article discusses four methods for overlaying images in a container on a web page

Overview

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.
 

Method 1: Positioned

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>

Open in new window

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>

Open in new window

 

Method 2: Background

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>

Open in new window

CSS

<style type="text/css">
.pngcontainer2 {
  background: url(images/dlbg.png) no-repeat 0 0;
}
</style>

Open in new window

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.
 

Method 3: Multiple Background Images

This method uses CSS3 multiple background images.
HTML

<div class="pngcontainer3"></div>

Open in new window

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>

Open in new window

Note: with this method the width and height have to be specified in order for the image to display correctly
 

Method 4: PHP GD2 imagecopymerge

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>
		

Open in new window

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);
}		

Open in new window


A working sample of the above can be found here
 
5
Comment
0 Comments

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Join & Write a Comment

In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month20 days, 17 hours left to enroll

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month