Scaling Image content for :before CSS sections - html

Question

.responsive td.head1:before {
content: url(myimage.png )
}
I want to put an image into a responsive table column (I'm using this to put the column titles as rows in a similar manner described at CSS Tricks here. The difference is that my 'headings' contain images. Those images need to be rescaled to fit, and I seem to be drawing a blank using such things as background-size. So is there any way to rescale/resize the image?
Update: Thanks for your suggestions about using a background-image - you get bonus points if someone can tell me a way of getting an image in a :before segment with an alt/description tag for disability compliance.

Answer 1

You can give the class a background image and style it. Try this...
name{
background-image:url("url here");
background-size:80px 60px;
}

Answer 2

Append a background image to this item, like here: http://jsfiddle.net/4rB5X/1/
.responsive th:nth-child(1):before {
content: "";
position: relative;
display: inline-block;
width: 30px;
height: 30px;
background-image: url(http://www.placehold.it/30x30);
background-repeat: no-repeat;
background-position: top left;
vertical-align: middle;
}
th
{
vertical-align: middle;
}
To address your question with the alt Tag for these images:
You may indeed use content for an pseudo alt-tag. You can use an attribute to define the desired text. Here is an exampe:
http://jsfiddle.net/4rB5X/2/
CSS
/* Puts the data-img-alt value of the <th> as content */
.responsive th:nth-child(1):before {
content: attr(data-img-alt);
}
/* Hide Text from content */
th.hide-text:before
{
text-indent: -99999px;
overflow: hidden;
text-align: left;
}
HTML
<thead>
<th class="hide-text" data-img-alt="Lalala">Test</th>
<th>Test</th>
</thead>
Update:
Like #vogomatix pointet out, the content property must not be null, but at least an empty string (content:""; would be ok). To have a workaround, try this:
th:before
{
content: "";
}
th[data-img-alt]:before
{
content: attr(data-img-alt);
}