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 (png-pixel.com, 2017). The ID attached supplies the ‘real’ image:

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

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

This solution allows accessible images supplied by CSS.

 

References:

png-pixel.com. (2017). Transparent PNG Pixel Base64 Encoded. [online] Available at: http://png-pixel.com/ [Accessed 16 Dec. 2017].


References

Please find all references here.

Leave a Reply