I\'ve come across an interesting problem in the following line of code:
The following will use css to set the src to a tiny transparent image which solves the src attribute issue while maintaining control from image:
content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
My overall approach is to define the following in my reset.css, then use a class to provide the actual image and control it. This behaves just like an img, but is entirely css controlled.
img {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
*display: inline;
vertical-align: middle;
*
vertical-align: auto;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
box-sizing: border-box;
}
img:not([src]) {
content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}
.myuniqueimage {
background-image: url('../images/foobar.png');
height: 240px;
}
Thanks to +programming_historian and +binnyb for the data:image tip