Jump to content

Add Alt Tag To Image In Css


yandoo

Recommended Posts

Hiya hopefully this is just a quickie..

 

Im using the following css for my header and with it is the image of my banner.

 

#header{
position:relative;
height:150px;
background:#fff url(images/banner.jpg) no-repeat center top;
width:100%;
display:block;
overflow:auto;
}

 

I need to add the alt tag to it.. How is it done? Outside or Inside the brackets and with or without "":

(images/banner.jpg) alt="banner description"
(images/banner.jpg alt="banner description")

Also and this may sound stupid but how can I test it out to see it working by blocking the images on my site?

 

Thank you :)

Link to comment
Share on other sites

Alt attributes are only for HTML tags, not CSS properties.

 

The proper way of accomplishing what you want, which I assume is to have a text-version of the header visible if no images are shown, is to use a heading tag with text. Then use CSS to hide the text itself, and show only the background image instead.

Link to comment
Share on other sites

you could also use php to see if banner.jpg exists in the given directory, if so, show the banner, if not show some text instead.

The point of alt text is to provide a meaningful description of what the image represents to browser that are incapable/configured not to/temporarily unable to display the requested image.  Checking for the images existence with PHP doesn't do any good for that.

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.