Can two images have the same image sources but different outputs?

Yes!

This tutorial will teach you how to change the output of an image without altering the HTML codes.

Example

Consider the following image outputs:

Image 1 with URL http://sub.domain.tld/img.png

Image 2 with URL http://sub.domain.tld/img.png

Let’s say that the two images have the same image URLs in the HTML source as given. How is it then that they have different outputs?

Now, take a look at the following CSS codes.

img[src*="img.png"] {
    margin: 0;
    padding: 100px 100px 0 0;
    width: 0 !important;
    height: 0 !important;
    background: url(http://sub.domain.tld/newimage.png);
}

The CSS configuration altered the image output.

How It Works

img[src*="filename.ext"] {
    margin: 0;
    padding: heightpx widthpx 0 0;
    width: 0 !important;
    height: 0 !important;
    background: url(URL_OF_NEW_IMAGE);
}

File Name

Lines to take into consideration: 1

First, the CSS will find the image to be replaced. To do so, replace filename.ext with the file name of the image and its corresponding extension. The asterisk (*) after src indicates that the string appears at least once anywhere in the image source. For example, if it is set to src*="ly.png", all images with “ly.png” in its file name, such as slowly.png, briskly.png, etc., will be affected by the CSS.

Image Dimensions

Lines to take into consideration: 4 – 5

As you have noticed, the width and height of the image is set to zero (0). Why? So that the old image will not be shown.

New Image

Lines to take into consideration: 3, 6

Replace URL_OF_NEW_IMAGE with the URL of the new image.

Set the padding widthpx and heightpx with the corresponding width and height in pixels of your new image. This will display your new image. Since the width and height of the old image is set to zero, the old image will not be displayed. As long as the padding is set to a specific width and height, the background image will be displayed regardless if the width and height is zero (0). This way, your new image configured in the CSS will be seen instead of the old image from the actual image source.

Applications

This technique is particularly useful in designing custom themes and layouts, where the user is unable to edit the HTML codes directly.

I hope this tutorial was useful.