Using Css Sprites and background position

Question

I have a div element, say of width 200px and height 200px. I need a small image to appear on the top right corner of the div. How one would normally do it would be with

background: url(/images/imagepath.png) top right;

However the problem is, I am loading the image from a sprite and when I use something like

background: url(/web/images/imagepath.png) -215px -759px  top right;

the sprite doesnt seem to pick it from the right location. Some other part of the sprite is loaded. Is it possible to load an image from sprite and use the background-position attribute as well. Thanks in advance...

Solution 1

You need to specify the coordinates for your element position and the background position in two different ways.

#yourimage {
  background-image: url(/web/images/imagepath.png);
  /* background coordinates */
  background-position: -215px -759px;

  /* element coordinates */
  position:absolute;
  left: 0;  /* 0px from the left */
  top:  0;  /* 0px from the top  */
}

With the background-position you specify the background coordinates. For the coordinates of your element, you need to set the left and right properties.

Keep in mind that in order to use sprites, your element must be of the correct size. The image you are using as a background must have enough space to cover the width and height of the element, not more, otherwise you will see more than one image from your sprites image.

If you want to display a image smaller than your element, you need a smaller element inside the big one.

<div id="container">
  <div class="background"></div>
  my content here
</div>

Then in your CSS

#container {
  position:relative;
  width: 200px;  /* size of your big element */
  height: 200px;
}
#container .background {
  background: url(/web/images/imagepath.png) -215px -759px;
  width:  50px; /* width and height of the sprite image you want to display */
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

Solution 2

You can use :before pseudoclass like this:

.element:before {
   content:"";
   position:absolute;
   right:0;
   top:0;
   width:20px;
   height:20px;
   background: url(/web/images/imagepath.png) -215px -759px;
}

but this is poorly supported yet.

My advice is to make another element inside your wrap and position it absolutely just like above :before but for example real div

EDIT

Another tricky way of using sprites in box corners is described here .

Solution 3

If you can use a preprocessor like SCSS:

(updated to actually answer the question asked; also see live example)

// ----------- only things you need to edit { ---------------
$sprite-size: 16px; // standard sprite tile size
$sprite-padding: 0px; // if you have padding between tiles
// ----------- } only things you need to edit ---------------

// basic sprite properties (extension-only class)
%sprite {
    width:$sprite-size; height:$sprite-size; // must restrict viewport, otherwise other sprites may "bleed through"
    // could set shared standard tilesheet `background-image: url(...)`
    // other standard styles, like `display:inline-block` or `position:absolute`
}

// helper for assigning positioning using friendlier numbers like "5" instead of doing the math
@mixin sprite-offset($xoffset:0, $yoffset:0, $increment:$sprite-size, $padding: $sprite-padding) {
    background-position: -($xoffset*($increment + $padding)) -($yoffset*($increment + $padding));
}

---

To "float" a background from a sprite, like the answer by @jose-faeti indicates you'd have to involve a placeholder element

<div class="float-bg">
    <div class="bg"></div>
    <p>Lorem ipsum dolor si...</p>
</div>

with style like:

.float-bg .bg {
    @extend %sprite; // apply sizing properties
    background-image: url(...); // actually set the background tiles

    @include sprite-offset(4);

    // specific configuration per accepted answer
    position:absolute;
    top: 0;
    right: 0;
}

---

In my original answer, to create a list of buttons, you could:

// list out the styles names for each button 
$buttons: 'help', 'font', 'layerup', 'layerdown', 'transform', 'export', 'save', 'clear', 'move-left', 'move-right', 'move-up', 'move-down', 'png', 'jpg', 'svg', 'funky';

.btns > * { @extend %sprite; background-image:... } // apply sizing properties, bg

// autoassigns positioning
@for $i from 1 through length($buttons) {
    $btn: nth($buttons, $i);
    .btn-#{$btn} {
        // @extend .sprite;
        @include sprite-offset( $i - 1 );
    }
}

would then work on something like:

<ul class="btns">
    <li class="btn-help">...</li>
    <li class="btn-font">...</li>
    <li class="btn-save">...</li>
    <li class="btn-export">...</li>
    <li class="btn-etc">...</li>
    <li class="btn-etc">...</li>
</ul>

Comments

[Maxim Dsouza]

The pixel position is to choose which part of the sprite should be picked. However that part of the sprite should appear ONLY on the top right corner of the div. Is there a way in which this can be done using sprites?

[GolezTrol]

You can make a small div, that has the size of the sprite and give it the sprite background as you usually do. Then place that div inside your 200px*200px div and give the sprite div position: absolute; top: 0; right: 0;. The parent must have position: relative or position: absolute too, or the positioning won't work properly.

[avall]

Unfortunately background-origin is even worse scenario than :before solution because of support since IE9 and :before pseudoclass since IE8.

[Maxim Dsouza]

It was partially solved as I realised that, what I was looking for couldnt be achieved...

[cfx]

This seems to be the best way to go about doing this nowadays. Compatible in modern browsers and IE8+.