Using CSS Sprites and Background Position

Using Css Sprites and background position

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;
}

How to set background-position with sprites?

It works fine .

But if you wanna correct the console you should add !important at the end of each background-position !

How to position a CSS sprite background image within the element?

Because you use CSS sprite you can't position it the way you want. but this solution might help. Using margin on an additional element having the background image in order to position it:

.BlockBox {
    display: inline-block;
    background-color: #0f0;
    width: 200px;
    height: 200px;
}
#block {
  margin: 100px 0 0 10px;
  width: 44px;
  height: 44px;
  background: url(http://www.w3schools.com/css/img_navsprites.gif) no-repeat -91px 0;
}

<div class="BlockBox">
    <div id="block"></div>
</div>

Fiddle demo.

How to scale CSS sprites when used as background-image?

Your image sprite has a dimension of 500x400 so define half this size if you want to reduce by 2 on the background-size then adjust the background-position to get any icon you want:

.my-sprite {    background-image: url("https://i.stack.imgur.com/lJpW8.png");    height:50px;    width:50px;    background-position:150px 0px;    background-size:250px 200px;        border:1px solid;}

<div class="my-sprite"></div>

Sprites with background position and width percentage in responsive design

The problem is with background-size: cover. The browser doesn't render a correct width and height. To fix it i use:

background-size: 100% 900%; // 100% to adjust to width and 900% is to mantain proportions in the height. (9 images of 102px in this case)

I tested in chrome 26.

Position CSS Sprite Background Image to the right of text

Try this.

.container {  width:1247px;  /*height:30px;*/    }
.container a {  display: block;  position: relative;  margin-bottom: 15px;}.container a:after {  background: transparent url(http://i.imgur.com/s5rf9GY.png) no-repeat;  height: 30px;  width: 30px;  display: inline-flex;  content: '';  position: absolute;  top: -5px;  background-position: -455px 0;}
.container .external {  background-position: -491px 2px;}.container .mail {  background-position: -526px 0px; }

<div class="container">  <a class="external" href="http://somelink.com/">MyLink</a>  <a class="mail" href="gmail.com">Mail To Us</a></div>

How to use a sprite for a background on a div, positioning to a part of the sprite to the right of the div

You're close. The only thing you need to do is use background-position to align it to the right. The new css is as follows:

div { 
  background: url('http://i.imgur.com/VBe5ey2.png') red;
  background-position: right -100px;
  background-repeat: no-repeat;
  width: 400px; 
  height: 200px; 
}

I tested it with Firefox, Chrome and IE11 and all seemed to work ok.

`background-position` in CSS sprites using negative values

You are actually moving/translating the sprite image in the coordinate system. As adapted from the answer to css sprite with negative background positions not clear, to display an image at position x=50 and y=20, move the sprite -50 to the left and -20 top in the coordinate system.

-50, -20
|-----------------------------------------------|
|                                               |
|       0,0                                     |
|       |--                                     |
|       |                                       |
|                                               |
|                                               |
|                                               |
|-----------------------------------------------| 

css sprite background-position not working

You have you CSS a little messed up. You have the background on the container, not the anchors.

.container
{
    width:1247px;
    height:30px;    
    background-color:#444444;
}

.container a
{
    background: transparent url('http://i.imgur.com/s5rf9GY.png') no-repeat; 
    height: 30px;
    width:30px;
    display:block;
    float:left;
    text-indent:-9999px
}

.container .Twitter 
{
    background-position: -491px 0;
}

.container .Plus
{
    background-position: -527px 0; 
}

Check the fiddle http://jsfiddle.net/Tn4F4/3/

How to deal with CSS sprite (using background-position) issue causing blurry images on mobile devices?

For anyone caring about a solution that uses PNG sprites, this is exactly what you can do. To help render the sprites smoothly on mobile (as well as high DPI screen) devices we need a larger image (about x2 the sizes, e.g: the normal screen requires a spritesheet width of 500px, you need at least another one with width of 1000px).

All the background-position and background-size are the same on all devices (mobiles & desktop pcs), the only difference here is the background-image. On desktop pcs you can use the normal (small) spritesheet whereas on mobiles you can use the larger one (as mentioned above).

Here are the 2 snippets of CSS code applied for desktop pcs & mobiles:

This is the common CSS:

.item {
   background-position: 0px 0px;
   background-size: 500px 300px;
   background-repeat: no-repeat;
}

This is applied for desktop pcs:

.item {
   background-image: url(your_normal_sprites_500.png);
}

This is applied for mobiles:

.item {
   background-image: url(your_large_sprites_1000.png);
}

To switch the style/css programmatically for desktop/mobiles, we can take the benefit of window.devicePixelRatio. This is not supported on some old browsers, but it should be available on most popular modern browsers now.

var isHiResScreen = (window.devicePixelRatio || 1) > 1;
if(isHiResScreen){
   //pick style for mobile
}
else {
   //pick style for desktop pc
}

Of course you should consider using SVG spritesheet instead if possible as @Dejan.S has mentioned in his comments (and of course I've known about this thanks to him). It's very promising :)

---

Related Topics