How to Replace the Image in an ‘img’ with CSS?
I just wanted to share something I found really cool about using CSS box-sizing. Chris wrote a really good introduction a few years back if you’re not familiar with the property. It makes things a lot more sane when thinking about layout. People love it so much, theyput it on everything like hot sauce. I wanted to share how I found it useful as (yet) another image replacement technique.
A few days ago at work, I was asked to replace an <img> on our site with another image hosted elsewhere. Simple right? But the catch was I would not be able to replace the markup as it was already deployed to production, but could inject CSS or JS through our CMS. For whichever technology I chose, it would be inserted on all site pages. I only needed on one specific page, and the attributes of parent containers were non-specific to the desired page.
<head>
<title>Really Cool Page</title>
</head>
<body>
<!-- .header would be across site on other pages with different children, so no background image adding -->
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>This is simple to do with JavaScript, but I wanted to see if there was another, even simpler, way. After a few iterations in Chrome Dev Tools, I thought to use the box-sizing property to keep dimensions strict, add the new image as a background image, and just push the inline image out of the way with padding and see what happened.
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}It worked beautifully. Here’s what’s cool:
- It works on just about any element, even empty ones like
<img>or<hr> - Browser support is excellent (Chrome, Firefox, Opera, Safari, IE8+)http://caniuse.com/#feat=css3-boxsizing
- Refrains from using SEO unfriendly
display: noneor other properties
That last point seemed important, as it works really well for text replacement too without any adjustment. Check it out!
