2

I have a "main-image" containing lots of small images which I "clip" into divs of fixed size by setting the background-position to some negative offsets. This works great!

Now I have a div with a size that changes during the lifetime of the web-page. The old code had its own backgound-image with the background-size set to "contain". Something like this:

.dump {
 display: inline-block;
 background-image: url("/some/image.png");
 background-repeat: no-repeat;
 background-size: contain;
}

And that worked great too.

Now I'm trying to clip that background image from my "main-image".

E.g. My "main-image" has a size 1800px128px The sub-image I like as background starts @1200px,10px with a size of 200px x 80px. Is there a way to clip this rectangle and than scale to the dimensions of the containing div (which are unknown at the time of programming)

Thanks for the hint. However, I tried but can't get anything to work: My problem is, that the div image should follow the height the containing div, so I can't tell size, or scale or zoom or whatever at the time of coding. I give an example:

<div style="width:100%; height:30%; text-align: center">
  <div class="dump"></div>  
</div>

Now, as I said: The image I want to appear as the background of div.dump is the 200x80px area from the main-image @origin(1200,10) AND I want that resulting image scaled to fit the hight of the container. So, I have a known translation, followed by an unknown zoom. Maybe it's just over my head.

Cœur
  • 37,241
  • 25
  • 195
  • 267
cssdata
  • 153
  • 2
  • 9
  • how about you set the background element `.background{` to a desired size and then scale the background image to fit that size? – Martin Apr 20 '15 at 18:09
  • from my understanding, your image is actually a sprite, looking up on "how to scale a sprite" led me to this http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite – Eduardo Wada Apr 20 '15 at 18:22

1 Answers1

0

I believe the best way to do this is using css transforms, I found this page for further reference on how to transform a background image and made this fiddle based on it.

The idea is that you will use the classes "icon" and "icon:before" to configure your sprite to fit in an element and use other classes like "smaller" and "bigger" to set the actual size of the element.

.icon
{
    font-size: 2em;
    text-align: center;
    line-height: 3em;
    border: 2px solid #666;
    border-radius: 7px;
    position: relative;
    overflow: hidden;
}

.icon:before
{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    background: url(http://blogs.sitepointstatic.com/examples/tech/background-transform/background.png) 0 0 repeat;

    transform: translate(-50%, -50%) scale(1.5, 1.5);
    background-repeat: no-repeat;
    background-size: contain;
}

.smaller{
    float:left;
    width: 120px;
    height: 120px;
}

.bigger{
    float:left;
    width: 200px;
    height: 200px;
}

Because css transforms support percentage, the background will be clipped and scaled correctly, according to the size defined in "smaller" and "bigger"

Eduardo Wada
  • 2,606
  • 19
  • 31