Clip/Crop Background-Image with CSS

Clip/Crop background-image with CSS

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>

Clip/Crop background-image with react and css

For responsive designing's you will not be able to get the exact crop for all the dimensions. However you can use px to get almost the same crop for the devices.

Mainly you have to play around the background-position attribute. See reference code below

 @media (min-width: 375px) and (max-width: 414px) {
  width: 350px;
  height: 600px;
  background-image: url('https://i.stack.imgur.com/aIWX6.png');
  background-position: -950px 0;
  background-size: 650px 100%;
  }

Crop background-image using CSS

background-size http://www.css3.info/preview/background-size/

Cropping and tiling a background image with CSS

The CSS clip property needs to have a position of absolute in order to function correctly.

.headimg3{
  background:url(footer1.png) bottom;
  background-position: -35px -358px;
  background-repeat: repeat;
  height: 34px;
  overflow: hidden; 
  position: absolute;
  clip: rect(0px, 200px, 0px, 400px); 
}

Reference: CSS Clip Property and Demo

Note:

You can't use a section of any sprite image and have that section repeated because
background-repeat is for the whole image.

In this case use a image editor and crop out the sprite you need and save it as a separate image file.

HTML - crop background image width when resize browser

use background-size: auto; background-repeat: no-repeat; remove the top and right align. if you want top right alignment for higher version(desktop view) use media query.

check the demo

How do I remove background-image in css?

Try:

div#a {
    background-image:none
}

How to crop not stretch a background-image

Unfortunately you cannot do something like

background-size: cover 40%;

cause you'll loose the 100%

the solution would be so make a separate image container, and after it an element for your (I suppose) text, setting simply background-size: cover; for the image container,
setting also width: 100%; and height : 40%; for the same.

But what you can do is

LIVE DEMO

<section>
  <div class="sectionImage" id="first"></div>
  <div class="sectionContent">1</div>  
</section>

<section>
  <div class="sectionImage" id="second"></div>
  <div class="sectionContent">2</div>  
</section>

<section>
  <div class="sectionImage" id="third"></div>
  <div class="sectionContent">3</div>  
</section>

section{
  background:#444;
  position:relative;
  margin:10px auto;
  height:300px;
  width:800px;
  color:#fff;
}
.sectionImage{
  width: 100%;
  height:30%;
  background: transparent none no-repeat center center;
  background-size: cover;
}
.sectionContent{}

#first{
 background-image: url('1.jpg');   
}
#second{
  background-image: url(2.jpg);
}
#third{
  background-image: url(3.jpg);
}

Clip/Crop Background-Image with CSS