Sprite css background will it work with fluid l as layout

Author Topic: Sprite css background will it work with fluid l as layout  (Read 3340 times)

Offline abcdfTopic starter

  • Trade Count: (0)
  • Semi-Newbie
  • *
  • Thank You 2
  • Posts: 43
  • Karma: 2
I use a css sprite to display backgrounds on a fixed width design. Im changing to fluid layout, but because of the background positions the background image goes wonky when the browser resizes.

Is it possible to use a css sprite with a fluid grid background, where it resizes eith the layout?


Offline Shikha Singh

  • Trade Count: (0)
  • Sr. Member
  • ****
  • Thank You 52
  • Posts: 323
  • Karma: 0
  • Gender: Female
  • solution to start online business
    • solution to start online business
Re: Sprite css background will it work with fluid l as layout
« Reply #1 on: 02-24-2016, 01:31:34 »
A fluid layout and using fixed positioning are not mutually exclusive.

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

Assuming that the icon maintains its size, you can move the image to a fixed size, absolute positioned child element:

.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>

 

Related Topics

  Subject / Started by Replies Last post
2 Replies
3264 Views
Last post 08-08-2012, 22:19:40
by masterharvest
0 Replies
1215 Views
Last post 06-27-2011, 01:49:26
by Walalayo
0 Replies
1099 Views
Last post 08-18-2011, 03:02:57
by springnetvn
0 Replies
913 Views
Last post 10-27-2011, 03:21:51
by manvbf
0 Replies
1084 Views
Last post 12-29-2011, 01:08:45
by lamnzxzfd