Clip/Crop background-image with CSS

by

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);
}


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

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.

More Related Contents:

  1. How can I scale an image in a CSS sprite
  2. Smallest data URI image possible for a transparent image
  3. Tools to make CSS sprites? [closed]
  4. Can I add color to bootstrap icons only using CSS?
  5. Using only CSS, show div on hover over another element
  6. How to align a to the middle (horizontally/width) of the page [duplicate]
  7. How to select a range of elements in repeated pattern
  8. Use of XSL-FO, CSS3 instead of CSS2 to create Paginated documents like PDF?
  9. What is the difference between a pseudo-class and a pseudo-element in CSS?
  10. Adjust list style image position?
  11. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  12. How to draw a circle sector in CSS?
  13. CSS specificity, Media Queries and min-width
  14. CSS media queries – Order matters?
  15. Using two CSS classes on one element [duplicate]
  16. First lowercase the text then capitalize it. Is it possible with CSS?
  17. angular 2 ngIf and CSS transition/animation
  18. ::before pseudo-element stacking order issue
  19. What’s the maximum pixel value of CSS width and height properties?
  20. How to make a column span full width when a second column is not there? (CSS Grid)
  21. Styling mat-select in Angular Material
  22. What is the meaning of \9 in this width property value declaration? [duplicate]
  23. How to reference a .css file on a razor view?
  24. How to push a footer to the bottom of page when content is short or missing?
  25. CSS select first element with a certain class
  26. CSS background-position not working in Mobile Safari (iPhone/iPad)
  27. Phonegap + Windows Phone 8 : viewport meta & scaling issue
  28. Revert a filter invert() CSS rule
  29. How to make my font bold using css?
  30. css – shrink a parent div to fit one child’s width and constrain the width of the other child [duplicate]

Leave a Comment