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.