Solution for responsive background images

[mars-abd]

.some-picture {
    display: block;
    width: 20px;
    height: 20px;
    background: url('path/to/img.jpg') no-repeat center;
}

It will be compiled to:

.some-picture {
    display: block;
    width: 2rem;
    height: 2rem;
    background: url('path/to/img.jpg') no-repeat center;
}

and here is a problem with bg image

I propose to add an option like this:

pxtorem({
    root_value: 10,
    responsive_bg: true
})

and it will be compile to:

.some-picture {
    display: block;
    width: 2rem;
    height: 2rem;
    background: url('path/to/img.jpg') no-repeat center;
    background-size: (get img width in px / root_value)rem
}

If background-size css prop is undefined, pxtorem plugin will add this css prop

[cuth]

This seems complicated because someone might already assign a background-size and it might be apart of the shorthand background property. Also, this might not be what the user intended because they never assigned a background-size.

My opinion is that if they want the background size to adjust by rems then they need to add the field with REMs or use pixel units be converted to REMs.

.some-picture {
    display: block;
    width: 20px;
    height: 20px;
    background: url('path/to/img.jpg') no-repeat center;
    background-size: 20px;
}

PostCSS

.some-picture {
    display: block;
    width: 2rem;
    height: 2rem;
    background: url('path/to/img.jpg') no-repeat center;
    background-size: 2rem;
}

If you want a background image to grow and shrink with the container you should use "cover" or "contain".

.some-picture {
    display: block;
    width: 2rem;
    height: 2rem;
    background: url('path/to/img.jpg') no-repeat center / cover;
}

[mars-abd]

Yes, you are right, it is complicated. It should be another process before pxtorem. I mean setting 'background-size' prop.

If you want a background image to grow and shrink with the container you should use "cover" or "contain".

Yes, but it will not work with css sprites