Take the 2-minute tour ×

Hi I am trying to set the font size to the img alt property but it affects the image size.

I'm doing something like this in the css

HTML Code:
<img alt="Some Text" src="http://www.someimage.com/img/010.jpg">


Can anyone help me in applying of font-size for the alt property of image without affecting image size.

Please note I don't want to use Javascript. Just pure CSS

share|improve this question
To my knowledge you can't affect that with CSS. –  kinakuta Jun 20 '11 at 7:08

4 Answers 4

up vote 3 down vote accepted

The alt property is a property of the image tag, it's not an element by itself. You can't style the alt property, in much the same way as you can't style the src property.

When you use img[alt] as a selector in CSS, you are not tatgeting the alt attribute of image tags, you are targeting any image tag that has an alt attribute. As you are setting the font size of the image tag, it will naturally also affect the image tag.

If you mean that you want to style the tooltip that some prowsers show when you hover the image, you can't do that. The tooltop is an implementation detail in the browser, and there is nothing in HTML that says that the alt attribute should be used that way, so there is no means in HTML for controlling that feature.

The intention of the alt attriute is to have something to show to the user if it's not possible to show the image.

share|improve this answer
I'm actually displaying a list of products with its image and some details. Now if for some, if the images are not getting displayed, it takes the 16px default font size. So it hampers the entire layout. –  Anubhav Ranjan Jun 20 '11 at 7:32
@Anubhav Ranjan: In what way do you see that setting the font size affect the image size? When I try it, it has no effect on the image size at all. –  Guffa Jun 20 '11 at 8:36
@Guffa: If I set a font size say 0.75em or even in pixels, it affects the image dimension. If its not for you, then can you please share your css styling. –  Anubhav Ranjan Jun 20 '11 at 9:34
@Anubhav Ranjan: I just tested some styles like font-size: 200px, font-size: 0.75em and font-size: 1px, and the image displays the same for all settings. –  Guffa Jun 20 '11 at 9:45
@Guffa: Are you applying the font-size for the img tag or img[alt]. –  Anubhav Ranjan Jun 20 '11 at 10:01

Refer to this answer regarding the alt attribute.

share|improve this answer
Thanks for helping. But, I want this to be applied for portals developed for mobiles. So because of that I cannot actually use the JS. If I use the img[alt] in css, it changes the font-size but it also affects the image size. –  Anubhav Ranjan Jun 20 '11 at 7:16
What is the restriction on js for mobile? Just want to avoid it? –  kinakuta Jun 20 '11 at 7:19
its like the project requirement. Since we are targeting on all the mobiles, most of the mobiles don't support js. So have to completely avoid JS –  Anubhav Ranjan Jun 20 '11 at 7:25

I could be wrong, but I think it's only controllable from the user's display property settings and can't be modified through css.

share|improve this answer

In my personal testing, setting a font-size attribute on an image had no effect on the image.

I was able to resize the alt text, though. At first I tried putting HTML inside the alt attribute, but it was displayed as plain text, not HTML. Then I wrapped the image containing the alt text in a span tag with a style, and that worked, because the image inherited the font-size from the span.

Here is an example:

<span style="font-size: 0.75em">
share|improve this answer

Your Answer


