CODEWITHSUNDEEP
csssprite
Thomas
Thomas

Reputation: 4719

CSS sprite scale to div dimensions

I was wondering if there is a way to scale a sprite image to the containing div's dimensions For example, if I have a sprite image with 10 frames (each 100x100 pixels, making it 1000x100) and the containing div is for instance 200px in width or 50px, is there a way for the frame to be displayed correctly within the div? Can background-size do anyting there? Thanks

Upvotes: 0

Views: 1915

Answers (1)

WeeklyDad
WeeklyDad

Reputation: 317

Are you using CSS3? Because of this you could do following

(HTML)

<div class='your-box'></div>

(CSS)

.your-box {
  background-image: url(.);
  background-repeat: no-repeat;
  background-size: contain;
}

You could test it out over here, http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain (w3 schools ftw)

Also I have this in my bookmark, http://caniuse.com/background-img-opts which allow me to see what works for which browser.

If you'd like it to be centered, you cud add to the CSS

      position: absolute;
      height: 100%;
      width: 100%;
      background-position: center;

But as I said, this works for CSS3 and still most people uses IE8 (css is supported by IE9+) but as I said before, have a look which browsers are compitable with CSS3 link again (http://caniuse.com/background-img-opts)

Upvotes: 1

Related Questions