Alt. Content for CSS Backgrounds

If you use css to apply background images and rollover effects on your site, you may have noticed the lack of an easy to implement alternative content attribute. Here is a sort of “hack” which allows you to provide fully formatted alternative content if css and/or images are disabled.

This is also useful for search engines and people with disabilities that may use screen readers. You should apply this to buttons, banners, and other elements using images. This allows you to use images with rarely used fonts, but still fall back on regular text.

.imagec {
	width:200px;
	height:80px;
	font-size:24px;
	text-align:center;
	position:relative;
	top:0;
	left:0;
	overflow:none; 
}	

.image {
	position:absolute;
	top:0;
	left:0;
	width:200px;
	height:80px;
	background-image:url('images/button6.jpg');
}
<div class="imagec">Button<div class="image"></div></div>

Leave a Reply