At the moment I have on my website some images which are defined in the CSS file as a background image.
The code looks like this.
The HTML:
<a href="http://domain.com" title="Website Title" class="image"></a>
The CSS:
.image {
background: url("../img/deelnemende-organisaties/arcadis.png") no-repeat;
}
Due to some other CSS3 effects with this background it isn't possible to change the background to a normal <img> tag.
Now I was wondering what is the best way to use background images and keeping the SEO ranking as high as possible.
I saw some solutions as:
- Putting text into the <a> tag and then hiding it with CSS with text-indent: -9999em
- Only put a title attribute on the tag with the text in it
- Placing a transparent in the tag with the same title as your tag
- Leave it as I have in my example and building up a so called Image Sitemap in a XML file
Now I'm not sure what is the best solution and I don't wanna screw my SEO ranking by doing something what they call illegal.