Clip Crop background-image with CSS

Question

I have this HTML    lt div id  graphic  gt lorem ipsum lt  div gt    with this CSS    graphic   background-image  url image jpg   width  200px  height  100px     The background image I m applying is 200x100 px  but I only want to display a cropped portion of the background image of 200x50 px   background-clip does not appear to be the right CSS property for this  What can I use instead   background-position should not be used  because I m using the above CSS in a sprite context where the image part I want to show is smaller than the element on which the CSS is defined

User · Accepted Answer

You can put the graphic in a pseudo-element with its own dimensional context:

#graphic {
  position: relative;
  width: 200px;
  height: 100px;
}
#graphic::before {
  position: absolute;
  content: '';
  z-index: -1;
  width: 200px;
  height: 50px;
  background-image: url(image.jpg);
}

_x000D_

#graphic {_x000D_
    width: 200px;_x000D_
    height: 100px;_x000D_
    position: relative;_x000D_
}_x000D_
#graphic::before {_x000D_
    content: '';_x000D_
    _x000D_
    position: absolute;_x000D_
    width: 200px;_x000D_
    height: 50px;_x000D_
    z-index: -1;_x000D_
    _x000D_
    background-image: url(http://placehold.it/500x500/); /* Image is 500px by 500px, but only 200px by 50px is showing. */_x000D_
}

_x000D_

<div id="graphic">lorem ipsum</div>

_x000D_

Browser support is good, but if you need to support IE8, use a single colon :before. IE has no support for either syntax in versions prior to that.

User · Answer

may be you can write like this    graphic     background-image  url image jpg     background-position  0 -50px    width  200px    height  100px

User · Answer

Another option is to use linear-gradient   to cover up the edges of your image  Note that this is a stupid solution  so I m not going to put much effort into explaining it      x000D   x000D   flair   x000D    min-width  50px     width larger than sprite    x000D    text-indent  60px  x000D    height  25px  x000D    display  inline-block  x000D    background  x000D      linear-gradient  F00   F00  50px 0 999px 1px repeat-y  x000D      url  https   championmains github io dynamicflairs riven spritesheet png    F00  x000D    x000D   x000D   flair-classic   x000D    background-position  50px 0  0 -25px  x000D    x000D   x000D   flair-r2   x000D    background-position  50px 0  -50px -175px  x000D    x000D   x000D   flair-smite   x000D    text-indent  35px  x000D    background-position  25px 0  -50px -25px  x000D    x000D   lt img src  https   championmains github io dynamicflairs riven spritesheet png  alt  spritesheet    gt  lt br   gt  x000D   lt br   gt  x000D   lt span class  flair flair-classic  gt classic sprite lt  span gt  lt br   gt  lt br   gt  x000D   lt span class  flair flair-r2  gt r2 sprite lt  span gt  lt br   gt  lt br   gt  x000D   lt span class  flair flair-smite  gt smite sprite lt  span gt  lt br   gt  lt br   gt  x000D   x000D   x000D    I m using this method on this page  https   championmains github io dynamicflairs riven  and can t use   before or   after elements because I m already using them for another hack

[css] Clip/Crop background-image with CSS

Examples related to css

Examples related to css-sprites