Geek Answers Handbook

CSS Sprite in fluid layout

I have a background image for CSS sprite

enter image description here

Now the problem is that I can only use the liquid layout (only%, no px), and positioning% creates a problem when resizing the browser (for example, some part of the other arrow is displayed)

How to fix it? Can I get an example of using% positioning for the background?

+4
source share
2 answers

The layout of the liquid and the use of fixed positioning are not mutually exclusive.

If you have an element on the page that does not expand, for example, using a sprite background, then using px for size or position is appropriate (possibly required).

+5
source

Assuming the icon retains its size, you can move the image to a fixed size, an absolute positional child:

 .icon { /* fluid 30% with 1:1 aspect ratio */ display: inline-block; width: 30%; padding-bottom: 30%; position: relative; border: 1px solid hotpink; } .icon::before { content: ""; /* auto margin trick for horizontal + vertical centering */ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* match icon size */ width: 30px; height: 30px; background-image: url(http://i.stack.imgur.com/th9Xy.png); } .icon.icon1::before { background-position: 0 0; } .icon.icon2::before { background-position: -30px 0; } .icon.icon3::before { background-position: -60px 0; } .icon.icon4::before { background-position: 0 -30px; } .icon.icon5::before { background-position: -30px -30px; } .icon.icon6::before { background-position: -60px -30px; } 
 <span class="icon icon1"></span> <span class="icon icon2"></span> <span class="icon icon3"></span> <span class="icon icon4"></span> <span class="icon icon5"></span> <span class="icon icon6"></span>
0
source

More articles:


All Articles