CSS Property Value How to - background-position: Control which part of an image to display for background

Question

We would like to know how to background-position: Control which part of an image to display for background.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.iconarray {<!-- w ww  .  ja  v a  2  s.  com-->
  display: block;
  background-image: url(http://www.java2s.com/style/download.png);
  background-repeat: no-repeat;
}

.icon1 {
  width: 64px;
  height: 64px;
  background-position: 0px 0px;
}

.icon2 {
  width: 64px;
  height: 64px;
  background-position: 0px -64px;
}
</style>
</head>
<body>
  <p style="background: silver;">
    Picture 1: <span class="iconarray icon1"></span> Picture 2: <span
      class="iconarray icon2"></span>
  </p>
</body>
</html>

The code above is rendered as follows: