Question

I have a CSS sprite image, footer1.png. I’d like to use CSS to crop out a section of the image, then tile the image as the background of my .headimg3 element.

I’m trying to use the clip and background properties to achieve this, but the image isn’t be cropped.

.headimg3 {
  background: url(footer1.png) bottom;
  background-position: -35px -358px;
  background-repeat: repeat;
  height:34px;
  overflow: hidden; 
  clip: rect(0px, 200px, 0px, 400px); 
}
.headimgp {
  padding: 8px 0px 0px 10px;
  text-shadow: 2px 1px #fff;
}

<div class="headimg3">
  <div class="headimgp">
    &nbsp; LATEST Updates
  </div>
</div>

How can I crop and tile a background image using only CSS?

Answer 1

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.