I'm trying to use a portion of an image on my website, I was told that I should use background-image and background-position, in order to position the background image so I show only part of the image, I've also tried clip: rect; but that also doesn't work.

I haven't typed it wrong because it'll work on other webpages, it's just that it won't even show the broken image notification, maybe the container is too small for it, I'm completely unsure of why it doesn't show.

I'm actually very unsure of when I need a new container and when I can just place elements where ever I want without anything to contain them.

<a class="twitter-btn" href="http://www.twitter.com/">Twitter</a>


<style type="text/css">
    .twitter-btn { height: 40px; width: 40px; background: url(images/twitter-btn.png) 0px 0px no-repeat; }
</style>

 

This is how to do an image sprite, is that what your looking for?

For icons we should really be going with SVGs now, and you can sprite them up too, but it's an entirely different process to spriting raster images. with raster you specify a window with which to look at the image through - here it's the width & height properties, then use the background-position property to move that 'window' relative to the sprite image.

For icons we should really be going with SVGs now, and you can sprite them up too, but it's an entirely different process to spriting raster images. with raster you specify a window with which to look at the image through - here it's the width & height properties, then use the background-position property to move that 'window' relative to the sprite image.

 

I haven't even looked into SVGs, are they good to use in IE8 (Have some stubborn council type clients)?

No the don't work in IE8 but you can do png fallbacks for them. There's Grunt tasks that can automate this, along with a JavaScript plugin https://github.com/jonathantneal/svg4everybody that's needed to load an external svg in all versions of IE - in IE8 the script will instead ajax in a png fallback, and a grunt task will automatically sprite your svgs and create png fallbacks if configured to do so. https://github.com/FWeinb/grunt-svgstore

 

 

This post on CSS Tricks has a lot of good information on SVG http://css-tricks.com/mega-list-svg-information/

Edited February 10, 201511 yr by rbrtsmith

I'll do some testing with it thanks, IE8 is almost more important for them than other browsers...

If you need to support IE8 then the extra work involved in creating fallback images makes it a waste of time really. Just serve up some nice PNG sprites for everybody. SVG support isn't that good in IE11 either and not all possible features are supported even in FF35 and are unlikely to make it into 36, it is only Webkit/Blink browsers that have really good support.

For icons we should really be going with SVGs now, and you can sprite them up too, but it's an entirely different process to spriting raster images. with raster you specify a window with which to look at the image through - here it's the width & height properties, then use the background-position property to move that 'window' relative to the sprite image.

 

By the way this isn't for an icon, it's just an image that needs to placed within a webpage, on the photoshop file it's zoomed in rather than the whole image.

maybe a link to the page would help clear this up?

 

By the way this isn't for an icon, it's just an image that needs to placed within a webpage, on the photoshop file it's zoomed in rather than the whole image.

 

Oh sorry I think he was referring to my code example as it was an icon.

If you need to support IE8 then the extra work involved in creating fallback images makes it a waste of time really. Just serve up some nice PNG sprites for everybody. SVG support isn't that good in IE11 either and not all possible features are supported even in FF35 and are unlikely to make it into 36, it is only Webkit/Blink browsers that have really good support.

All the work for fallbacks can be automated with grunt. IE9+ Actually has pretty good support and Chris Coyier has covered this in depth. To link to spritemaps you simply need a polyfill for IE. Not much extra work at all.

 

And the benefits are huge. again Chris Coyier has covered these in depth at his conferences and on CSS-TRICKS.

 

Png icons look awful on retina screens.

 

The issues you are talking about are for more advanced features that should be used as a progressive enhancement. For simple icons then the support is very good.

 

 

Recent article published on automating this SVG w/ png fallbacks http://css-tricks.com/inline-svg-grunticon-fallback/?utm_content=bufferf3e32&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

Edited February 12, 201511 yr by rbrtsmith