CODEWITHSUNDEEP
htmlcss
Mawg
Mawg

Reputation: 40140

Can I style an image's ALT text with CSS?

I have a dark blue page and when the image is loading (or missing) the ALT text is black and difficult to read (in FF).

Could I style it (with CSS) to be white?

Upvotes: 71

Views: 165751

Answers (7)

user14096240
user14096240

Reputation:

Yes, image alt text can be styled using any style property you use for regular text, such as font-size, font-weight, line-height, color, background-color,etc. The line-height (of text) or vertical-align (if display:table-cell used) could also be used to vertically align alt text within an image element or image wrapping container, i.e. div.

To prevent accessibility issues regarding contrast, and inheriting the browser's default black font color when you've set a dark blue background-color, always set both the color of your font and its background-color at the same time.

for some more useful info, visit Alternate text for background images or The Ultimate Guide to Styled ALT Text in Email

Upvotes: 0

Jake Dempsey
Jake Dempsey

Reputation: 6312

You cant style the alt attribute directly in css. However the alt will inherit the styles of the item the alt is on or what is inherited by its parent:

    <div style="background-color:black; height: 50px; width: 50px; color:white;">
    <img src="ouch" alt="here i am"/>
    <div>

In the above example, the alt text will be black. However with the color:white the alt text is white.

Upvotes: 5

hassan
hassan

Reputation: 8278

as this question is the first result at search engines

There are a problem with the selected -and right by the way- solution, is that if you want to add style that will apply to images like ( borders for example ) .

for example :

img {
  color:#fff;
  border: 1px solid black;
  padding: 5px;
  background-color: #ccc;
}
<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" /> <hr />
<img src="https://cdn4.iconfinder.com/data/icons/miu-square-flat-social/60/stackoverflow-square-social-media-128.png" alt="BLAH BLAH BLAH" />

as you can see, all of images will apply the same style

there is another approach to easily work around such an issue, using onerror and injecting some special class to deal with the interrupted images :

.invalidImageSrc {
  color:#fff;
  border: 1px solid black;
  padding: 5px;
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<img onerror="$(this).addClass('invalidImageSrc')" src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" /> <hr />
<img onerror="$(this).addClass('invalidImageSrc')" src="https://cdn4.iconfinder.com/data/icons/miu-square-flat-social/60/stackoverflow-square-social-media-128.png" alt="BLAH BLAH BLAH" />

Upvotes: 4

searching9x
searching9x

Reputation: 1605

In Firefox and Chrome (and possibly more) we can insert the string ‘( .... )’ into the alt text of an image that hasn’t loaded.

img {
  font-style: italic;
  color: #c00;
}

img:after {
  content: " (Image - Right click to reload if not loaded)";
}

img::after {
  content: " (Image - Right click to reload if not loaded)";
}
<img alt="Alt text - " />

Upvotes: 2

No Results Found
No Results Found

Reputation: 102735

Sure you can!

http://jsfiddle.net/VfTGW/

I do this as a fallback for header logo images, I think some versions of IE will not abide. Edit: Or Chrome apparently - I don't even see alt text in the demo(?). Firefox works well however.

img {
  color: green;
  font: 40px Impact;
}
<img src="404" alt="Alt Text">

Upvotes: 17

MikeM
MikeM

Reputation: 27405

Setting the img tag color works

img {color:#fff}

http://jsfiddle.net/YEkAt/

body {background:#000022}
img {color:#fff}
<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />

Upvotes: 92

katsampu
katsampu

Reputation: 425

You can use img[alt] {styles} to style only the alternative text.

Upvotes: -3

Related Questions