confusion with css background and img src? help!

[elduderino]

Hi there,

Im designing a site with a sidebar floated left and a main section running on the right. The main section is made up of a few boxes, each with a title at the top of the box. The titles are actually gif images which ive attached to the div as a background image.

Could someone clarify?:

If ive specified the background image in my css do i still need to put the <img src> to specify it again in the html. My problem is that i know need to do this so i can put an alt tag on the image to be compliant but everytime a then specify any positioning in the css the background image appears twice. Once from where i specfied it in the css as a background in the positon i put it and again at 0,0 from the <img src> in the html!

I hope this makes sense i know its a bit wordy!!

( i cant include a pic, im away from my own machine, but its being reviewed in design elements at the mo-its the one that says " what do you think of this in terms of layout" if u want to see!)

[jthale]

If you are using the titles as background images you do not need to use the <img /> tag as the image is already being displayed. What you should be doing is attaching the title image to an <h2> or <h1> element using css and using an image replacement technique to hide the text and show the image. This gives it proper meaning and the look you want.

[elduderino]

right got you,

The only reason i wanted to put a <img src> in the html was so i could get an alt tag in there to explain to screen readers etc what the image was saying.

So i can use the a h1 class and position it in the same way cant i? Only problem is im still not getting any alt tag in there

How do i do this. I know its something to do with making the original text go far off left/right of the page and putting the image back in there.

How?

[Paul O'B]

Hi,

If your image forms part of the content then it should be in the html just like a piece of text. If on the other hand an image is just decoration like a background border or colour then it can go in the background and no alt text is necessary.

Image replacement methods are generally used to replace text with images in order to make the page look better but still retain meaning to assisted users. However all image replacements methods have draw backs.

Here are my image replacement techniques.

http://www.pmob.co.uk/temp/headerreplacement2.htm
http://www.pmob.co.uk/temp/navimagereplace.htm

If your image is important to the content then I can see little benefit from swapping it from the html into the stylesheet unless of course it suits you to have the convenience of the images being controlled from the stylesheet. It's just one of those things that you weigh up the pros and cons and decide yourself. You will probably end up upsetting somebody know matter what you do

[elduderino]

Hi paul,

Thanks for the info. Thats a great way to replace text with an image. I have two questions though.

Firstly, does the span title work in the same way as the alt tag, for instance would a screen reader pick this up?

Secondly, the absolute positoning means that if i view my page at a different res the images are going to be in the wrong place. Am i right?

[Paul O'B]

Firstly, does the span title work in the same way as the alt tag, for instance would a screen reader pick this up?

In my method it doesn't matter whether or not the screenreader reads the title tag of the span (although it should read it anyway) because the actual text is always there in the html for it anyway which is why the method is so solid.

The title text in the span is actually for all visitors and used as a kind of tooltip.

(Other methods that use display:none may fail because some screenreaders obey the display:none and do not read the elements contents.)

Secondly, the absolute positoning means that if i view my page at a different res the images are going to be in the wrong place. Am i right?

No you are wrong The element in this case is placed in relation to its parent and not the viewport. A positioned elements parent is any parent that has a positioned defined (absolute or relative).

Changing the resolution will make no difference as the images are always where they should be

[elduderino]

Ok, got you.

Thanks for your help!

[elduderino]

hI,

Ive tried this technique with the following code. I think ive written it identical to the example you gave me but my replacement image doesnt appear( its definately in the right folder). The <h1> text appears but below where the image should be. Its almost as if the replacement image is invisible and then h1 text is appearing below, if you see what i mean?!?

Heres my code:

Css:

h1 { position: relative;
       font-size: 9px;
       width: 182px;
       height: 17px;
     }

h1 span { background: transparent url (mainbackground.gif) no-repeat;
              position: absolute;
              left: 0px;
               top: 0px;
               width: 182px;
                height: 17px;}

html:

<h1> welcome to solutions 4<span title="welcome"></span></h1>

[ysyon]

try getting rid of the space betwen url and ()

[elduderino]

Hey there,

Yep, that was it!

I would have never imagined that would have caused me the problem, thats why i didnt spot it.

thanks for your help!