Scaling Image content for :before CSS sections

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);
}