I've been working on a web site using the CSS sprite technique for the first time. The site is on a hosted platform and has the unusual restriction of only allowing the upload of one image right now (hence the use of CSS sprites).

This has all been going fine until it came to the logo of the site. Currently the logo can be seen with all of the other images used in CSS sprites beneath it (that's the blue and orange gradients on the left):

alt text

The logo HTML is:

<div id="hlogo">
    <a href="http://www.sharepointoverflow.com/"><img src="theme.png"></a>

The logo CSS is:

#header #hlogo {

Up to now everything's been fine because there was no img tag. I can remove this with JavaScript but would really prefer not to in case people don't have JS enabled. I've tried playing with background-image a little without success.

What is the best way to solve this?

  • Nice site btw, I've been doing a lot of sharepoint work lately. It hurts. danwellman over 9 years ago

2 answers

This was chosen as the best answer
#hlogo {
  width: 250px; 
Answered over 9 years ago by Richard Grevers
danwellman 5600

You can only use sprites with background images. if you use a sprite as the src of an <img> element it shows the whole sprite file.

If it's just the logo that is a proper <img> and the rest are all background images, you might get away with having the logo right at the top left of the sprite file and using CSS to fix the width and height of the <img>. but you certainly can't set the background position of a standard <img> element :)

You could get rid of the image and set the logo as the background image of the heading div. For accessibility include the text within the logo as proper text in the heading div and hide it using a negative text-indent ;)

Answered over 9 years ago by danwellman