css alt text for images.

[fileslasher]

I have an h2 in a div with a custom header image, its also spanned and I have the display set to hidden so only the image will show. Just wondering how to use alt text using css in case users of my site happen to have images turned off.

[tommythewolfboy]

Did you want to show your code - I think I know what you mean but couldn't quite follow your description. Is the "custom header image" a CSS background?

[zerokilled]

you can't set the alt attribute with css, css doesn't define a property for this purpose.

[icio]

You set the alt text in the HTML. For example:

<img src="picture.jpg" alt="Pictures Disabled!" />

[fileslasher]

You set the alt text in the HTML. For example:

<img src="picture.jpg" alt="Pictures Disabled!" />

I know, but I cant do it that way, I need to use css.
heres my code.

html:
<div class="header">
<h2><span>Welcome</span></h2>
</div>

css:
.header {
position:absolute;
width:360px;
height:50px;
left:260px;
top:40px;
background-image:url(assets/header5.gif);
background-repeat:no-repeat;
}
.header span {
display:none;
}

[icio]

Ah, I see what you're trying to do. No real way of doing that, as far as I can see. If the User has CSS disabeld the <span> will automatically show and the image won't - which is kind of what you're trying to do, I guess.

But you can't tell if the image has loaded.
Perhaps you could load the image _over_ the <span> so that when the image has loaded the span is not visible as the image is over and if the image has not loaded the span remains visible?

[fileslasher]

I found a pretty good solution in case any1 wants to use it. The only problem is overflow when sizing text in a browser, some of the text might get cut off depending on the height of the div and what header you use. I had to switch to h2. Also, transparent images dont work, the text can be seen which kind of sucks.

Here's the method.

div class="header">
<h2 class="replace" id="myh2">Welcome<span></span></h2>
</div>

.header {
position:absolute;
width:360px;
height:50px;
left:260px;
top:40px;
background-color:#FFFFFF;
}
.replace {
position:relative;
margin:0px; padding:0px;
overflow:hidden;
}
.replace span {
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}
#myh2, #myh2 span {
height:50px;
width:360px;
background-image:url(assets/header5.gif);
}