Why Background-image?

[ayok]

Hi,

 

I just wonder why nowadays more people like to use background-image instead of <img src=""> for the header of their site. Is there any good reason? Because i tried and i found it easier with just using <img> tags.

 

Thanks,

 

ayok

[rhodesa]

The main reason I do it is to allow items to be on top of it (like menus, etc). But also, in my mind, it's more of a style then an 'image' (like a photo) that needs to be there. So I like the fact that it's in my stylesheet

[ToonMariner]

the main reason to do this is because you should never use an image to convey anything you can do with semantic markup.

 

The use of background images and hiding text allows you to provide a nice eye-catching design or company logo but still maintain readability for text only or assistive technology devices.

[TheFilmGod]

If you use a <img src="" />, enclosed within <a></a> (so it can link back to the homepage) and that uses some style of margin...  will create problems in modern browsers like FF.

 

FF makes a border around the link (after you click it). Since there is a "margin: something" it makes the linked border from the initial place the image was pushed from with the margin, instead of enclosing the image properly.

 

A background image would fix this problem.

[ayok]

Hi. thank you guys.

 

I have a question regarding the links on image. How should I set link on background-image?

 

For example i put the image in <h2 style='background-image:url(img.jpg);'>, and i want to set a link on the image shows.

 

I've tried <a><h2></h2></a>, it works, but it's not allowed in xhtml.

 

any advice?

 

regards,

ayok

[ToonMariner]

<h2><a href="">text</a><h2>

 

give the a tag in side h2...

 

h2 a

{

display: block;

text-indent: -9999px;

}

[ayok]

aah yes of course..

 

thanks,

 

ayok

[dbrimlow]

Just to clarify, ayok, you "should" have text inside the <h2> tags.

 

Like TM said, if you are using an image instead of text, that's poor markup - and if you do that anyway, you may as well just use the <img src="" /> instead of the image as background. At least that way people with visual disabilities will know there is an image there.

 

Using blank header <h2> tags removes any benefit of using headers in the first place.

[bronzemonkey]

<h2><a href="">text</a><h2>

 

give the a tag in side h2...

 

h2 a

{

display: block;

text-indent: -9999px;

}

 

When you turn images off, you're left with nothing there. This technique is discouraged in favour of using an empty span that is layered over the top of the text - the unsemantic markup is a small price to pay for increased accessibility:

 

<h2><a href="#non">text<span></span></a></h2>

h2 a {position:relative; display:block; width:200px; height:20px; overflow:hidden;}
h2 a span {position:absolute; top:0; left:0; width:100%; height:100%: background:url(/images/h2-background.gif) no-repeat 0 0; cursor:pointer;}

[haku]

That's interesting bronzemonkey - I have never seen that  technique, but I like it, and will probably use it in the future. I have been using text-indent: -9999px up until now, but I never thought about the accessibility of it.

[bronzemonkey]

If you use a <img src="" />, enclosed within <a></a> (so it can link back to the homepage) and that uses some style of margin...  will create problems in modern browsers like FF.

 

FF makes a border around the link (after you click it). Since there is a "margin: something" it makes the linked border from the initial place the image was pushed from with the margin, instead of enclosing the image properly.

 

A background image would fix this problem.

 

Just to come back to this. There is no technical problem with using an image within an anchor. Just set the image to {display:block;} and use {border:0;} to avoid the issues with the inline "margin" often found at the base of the image. There are many sites that use img tags for logos with no technical problem.