Background-size CSS property

Using CSS background-image gives you lots of style options, but the major drawback is that it destroys the accessibility. My initial idea was to apply the background to the <img> tag to allow the alt property, but the browsers interpret no ‘src’ attribute in the tag to mean the image is missing. This often causes the browser to display a broken image icon and the alt text.

A solution to this is to create the background using the <img> tag which then holds the alt attribute and the code for a base 64 encoded 1px transparent image (, 2017). The ID attached supplies the ‘real’ image:

<img id="image1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="Supply alt for the background image">

#image1 {background-image: url("./balloons.jpg");

This solution allows accessible images supplied by CSS.


References: (2017). Transparent PNG Pixel Base64 Encoded. [online] Available at: [Accessed 16 Dec. 2017].


Please find all references here.

Leave a Reply