Is it ok to user a "spacer.gif" in a container with a background image to apply alt text to that background image

Question

I have a background image in my header area of my site. It's done as a background image for responsive design purposes. I would like however for screen readers to be able to read some information about that area (company info).

I have placed a spacer.gif (ya know...what we used to use in the old days of tabular layouts :) ) in that container and added alt text to it so screen readers will still be able to provide good accessibility.

I haven't found anything that says this is "ok" so I'm wondering about good practice or not. That being said, I also haven't found anything that says it's not good practice "not ok".

Can anyone shed some light here? TIA

EDIT: I ended up using my own suggestion as I didn't get any feedback to tell me it was a bad idea. I will mark isherwood's answer as the answer because it is certainly a viable alternative.

here's what I did:

        <div id="headerImage">
            <img src="~/Content/images/spacer.gif" alt="Widgets For Sale Here At This Widget Store" />
        </div>

where #headerImage contains the CSS to place my banner image as a background image.

Answer 1

That's probably a valid option, but it adds markup and the need to deal with another image file.

I would use an offscreen text element at the start of the element having the background image:

.offscreen {position: absolute; left: -999em;}

<div class="header-with-css-background">  
    <span class="offscreen">Information about the image here</span>
    Other header content
</div>

You'll probably find that having such a class available proves helpful in a number of situations, such as when a form should have a label but you don't want to show it to sighted users because you have placeholder text on the input.

Answer 2

If you want screen readers to glean info about your company, add that to the alt tag for the background image. According to the W3.org page, if an image is the only content of a link or form control, " Use the alt attribute communicate the destination of the link or action taken."

Follow this link to more complete discussion of best practices for use of alt tag in web pages, at w3.org