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 · 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

User · 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   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   lt div id  graphic  gt lorem ipsum lt  div gt  x000D   x000D   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

[css] Clip/Crop background-image with CSS

Examples related to css

Examples related to css-sprites