Re: Background image cropping

I believe Mozilla has a -moz-image-rect() [1] image function that clips the input image argument. It is not specified though.

Dirk

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-rect


> On Jun 9, 2014, at 10:30 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
> 
>> On Mon, Jun 9, 2014 at 2:27 AM, Lajos Koszti <ajnasz@ajnasz.hu> wrote:
>> Hi,
>> 
>> I have an idea which could be useful for everyone.
>> 
>> Image sprites are pretty popular these days, where you add several
>> images to one image set as as a background image and crop it by
>> setting a fixed size of the element and moving the background image
>> behind it. Using the ::after and ::before you don't even need the
>> extra element into the HTML code.
>> However it's a hackish thing. You may want to use the ::after and
>> ::before selectors for other purpose or you would need an icon from a
>> sprite for an element, where you can not use the ::after or ::before
>> like inputs.
>> 
>> So, a great solution would be to be able to define the area which is
>> visible from a background image. That would make possible to not add
>> extra elements from the DOM just to crop a background image, use
>> pseudo-elements to other then cropping an image and also we would be
>> able to use sprite with any element which can have a background image.
>> 
>> What do you think?
> 
> This is already possible per spec, by using Media Fragments.  See
> <http://dev.w3.org/csswg/css-images/#image-fragments> for an example.
> However, no browser implements Media Fragments yet.
> 
> ~TJ

Received on Tuesday, 10 June 2014 14:41:06 UTC