CSS Sprite Techniques, CSS Background or Img's Clip

CSS Sprite techniques, css background or img's clip

The difference comes mainly down to the semantics of the document: You should still only use backgrounds for decorative and layout graphics, and only use image tags for graphics that are part of the content of your page.

Remember that pages should still be useful and usable without any CSS: with the second technique, this would mean that your whole sprite-map would be visible (you wouldn't get any clipping) everywhere you used a sprite - very confusing!

The first technique wouldn't show any sprites, but wouldn't be wrong or confusing either.

Whether a graphic is content or decoration gets a bit tricky when you consider things like icons - where sprite techniques are really useful. Personally, I prefer to use background images for icons, as they are adding information to another element (say a link or button control), not elements in their own right.

In short - the image tag based sprites is a bit of a broken technique - I wouldn't use it.

CSS Sprites - not only for background images?

You can use a standard <img /> tag and put it in a container (like a <div />) with a limited height/width. Then use relative positioning or negative margins to control the position of the image.

How to crop a background image when using sprite

In general content images should not be backgrounds or sprites, they should be inline images using the IMG tag. Sprites are usually reserved for UI elements such as icons and menu elements.

<div class="sprite1"></div>

CSS:

.sprite1 { 
        height:400px;
        width:400px;
        background-image:url(http://www.studioteknik.ca/stada/wp-content/themes/stada-theme/images/banner_sprite.jpg);
        background-position:0 -400px; 
    }

How do I make a CSS sprite that controls multiple background images for multiple DIV's?

As per your comment, below is the content of the fiddle I created:

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>

div {
    width: 100px;
    height: 20px;
    border: 1px solid #aaa;
    margin-bottom: 5px;
    background-image: url('http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG');
}
#one {
  background-position: -15px 0;
}
#two {
  background-position: -15px -27px;
}
#three {
  background-position: -15px -54px;
}
#four {
  background-position: -15px -81px;
}
#five {
  background-position: -15px -108px;
}

http://jsfiddle.net/TFwdB/

Is using the logo tag in sprites good or bad?

A logo is part of the content of your site, therefore it should be in an img tag, not as a background image. It will help to increase SEO (adding a title and alt attribute will too) and the reason companies like Google, Facebook, et al put their image in a sprite is for load times - not SEO enhancement.

Does your company have the same SE rank as Google or Facebook? No. Until then, keep putting the logo in an img tag where it belongs. When your site is consistently the most viewed site on the internet, then you can start thinking about performance more than SEO.

Also, as an aside, if the logo ever had a tweak (size, color, etc), the sprite would have to be recreated as well as the CSS. If it was just an img tag, this hassle is nonexistent.

css sprite images showing but a:link urls not showing when I hover over the images

Your a element is empty.

Add this to your css

.social-icons a {
display: block;
height: 100%;
}

Is there an equivalent of spriting for SVG images in web pages?

You can use 'traditional' CSS sprite techniques to slice up SVG images with background position, here's a quick example, though it does get a little confusing if you also start using background-size. It's probably easier if you define a size on your SVG image:

<svg version="1.1" 
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     width="320"
     height="240"
     viewBox="0 0 320 240">

Single CSS sprite for 2 different classes. Is it a good way to do it?

background-position only applies to the background-image of the element, that's not something that is inherited (you don't have to add background: none on each children to stop cascading and having the same background over and over with parent, child, grand-child elements isn't it?).

So you've got 3 occurences of background-image here, one for outsider, one for child-1 and one for each child-2 (you've got a typo with the latter). And 3 different pairs of values for position.

Browsers will only request once each unique resource, don't worry but the order of CSS, JS, images, defer, async, etc resource loading may vary. Err does vary in fact.

The best way to use sprites is knowing when not to use them: do not use them when you should use an HTML image with an alt attibute.

Finally, you lack one important property: background-repeat. No sprite for repeating ones (you'd see all the sprites at once). 3 different sprites for no-repeat, repeat-y and repeat-x ones are necessary.

---

Related Topics