Percentage-based backgrounds?

[rachelnabors]

Hello! I'm looking to switch over to PostCSS from Compass. I mostly use Compass for spriting. Your plugin came highly recommended and looks aces! However, there's something I need that it doesn't do... but Compass does:

Provide background positioning and sizing in percentages.

It's very useful when doing responsive sprite animations where you want the image to stay a certain size in relation to the content.

Any chance this is on the way? I can provide some math if that helps :)

[vvasilev-]

Hello, I think that this might be achieved with the groupBy option. Can you paste some CSS/Sass as an example?

[rachelnabors]

Was this closed because it was added or because I didn't reply fast enough? Am stuck in Manila till the end of week. APEC closed the airport :( On Thu, Nov 19, 2015 at 17:53 Viktor Vasilev notifications@github.com wrote:

Closed #29 https://github.com/2createStudio/postcss-sprites/issues/29.

— Reply to this email directly or view it on GitHub https://github.com/2createStudio/postcss-sprites/issues/29#event-468969178 .

[vvasilev-]

This issue was closed because I doesn't have a starting point to implement this feature. If you have something that can be used for this feature I will start to work on it. :)

[rachelnabors]

I do! But be patient, I am in a bit of a travel crisis here. On Thu, Nov 19, 2015 at 18:48 Viktor Vasilev notifications@github.com wrote:

This issue was closed because I doesn't have a starting point to implement this feature. If you have something that can be used for this feature I will start to work on it. :)

— Reply to this email directly or view it on GitHub https://github.com/2createStudio/postcss-sprites/issues/29#issuecomment-158020548 .

[rachelnabors]

Hey, Viktor! I'm back! Want to reopen this issue and I'll leave some maths for you?

[vvasilev-]

Welcome back! Paste some examples so I can start work on this.

[rachelnabors]

Ok. When scaling sprite images inside responsive elements, you need two things:

• the individual image's dimensions
• the overall sprite's dimentions

You use these to set the element's:

• background-position
• background-size

And here's how they play out:

Setting background-position

(Borrowing maths from http://www.browniesblog.com/A55CBC/blog.nsf/dx/responsive-css-sprites.html) $spriteX: percentage($childSpriteOffsetX / ($parentSpriteWidth - $childSpriteWidth)); $spriteY: percentage($childSpriteOffsetY / ($parentSpriteHeight - $childSpriteHeight));

background-position:$spriteX $spriteY

Setting background-size

$spriteW: percentage($parentSpriteWidth / $childSpriteWidth); $spriteH: percentage($parentSpriteHeight / $childSpriteHeight);

background-size:$spriteW $spriteH

[vvasilev-]

See Responsive Sprites.