Geek Answers Handbook

Responsive background image sprite like

Hi I have two columns of content inside the container, the first column has text, and the second is a span with a sprite background. The problem is that when I get a lower screen resolution, I want the background sprite image to have a percentage width in order to be able to scale it along with H5 with a percentage width, is there any way to do this?

h5{ float:left; display:block; width:800px; } .sprite{ background-image: url("assets/img/website_sprite_a.png"); background-position: -60px -60px; float:left; display:block; width:64px; } <div class="container"> <h5>Title </h5> <span class="sprite"> </span> </div>
+6
source share
2 answers

In your case, I would go with one background-image , but in case you have a lot of images or you really want to do this, you can use the background-size property.

From MDN :

The CSS background size property determines the size of background images. The image size can be completely limited or only partially in order to preserve its internal ratio.

 .sprite{ background-image: url("assets/img/website_sprite_a.png"); background-position: -30% -30%; //use % instead pixels float:left; display:block; width:64px; background-size: 100%; //play with this }

You should also read the following:

I played a little with this on JSFIddle . Resize your browser to see the effect.

+5
source

almost a year is too late, but I tried to find out the same thing and could not come up with or find a direct answer. After a little cheating with a few tips, I realized this. I have not yet had the opportunity to test this on IE8 and have stopped worrying about IE6 / 7, so please keep that in mind.

The trick I found is to use a combination of background position (using percentages - sprite images, as mentioned earlier), padding-top (again, using percentages is a percentage of the total width of the sprite image) and background size: cover.

Play with him on jsfiddle .

 #wrapper { position: relative; width: 100%; } .div { position: absolute; top: 0; left: 0; background-image: url('http://upload.wikimedia.org/wikipedia/en/2/2e/Sprite_logo.jpg'); background-repeat: no-repeat; background-position: 0% 0%; background-size: cover; padding: 50% 0 0 0; width: 40%; } <div id="wrapper"> <div class="div"></div> </div>
0
source

More articles:


All Articles