CSS Tutorial - CSS3 Backgrounds








CSS3 has the following three background properties we can use to style the element background.

  • background-clip
  • background-size
  • background-origin

background-clip specifies the painting area of the background images

background-size property sets the size of the background image.

background-origin property specifies the positioning area for the background images.





background-clip

The background-clip property specifies the painting area of the background.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from www .j  a v  a2s.  c om-->
    width: 200px;
    height: 200px;
    padding: 50px;
    background-color: yellow;
    background-clip: content-box;
    border: 2px solid #92b901;
}
</style>
</head>
<body>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. 
</div>

</body>
</html>

The code above is rendered as follows:

The values for background-clip can be one of the follows:

  • border-box
  • padding-box
  • content-box
  • initial
  • inherit




background-origin

background-origin property specifies the positioning area for the background images.

The background image can be placed within the content-box, padding-box, or border-box area.

   +-----------------------------+
   |border-box                   |
   |   +--------------------+    |
   |   |padding-box         |    |
   |   |  +--------------+  |    |
   |   |  |Content-box   |  |    |
   |   |  |              |  |    |
   |   |  +--------------+  |    |
   |   |                    |    |
   |   +--------------------+    |
   |                             |
   +-----------------------------+

The following code shows how to use background-origin for different values.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!-- ww  w.  ja  va 2 s. co  m-->
    border: 1px solid black;
    padding: 35px;
    background-image: url('http://placehold.it/100x100');
    background-repeat: no-repeat;
    background-position: left;
}

#div1 {
    background-origin: border-box;
}

#div2 {
    background-origin: content-box;
}
</style>
</head>
<body>

<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat.
</div>

<p>background-origin:content-box:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

The code above is rendered as follows:

background-size

background-size property sets the size of the background image.

The following code shows how to resize a background image.


<!DOCTYPE html>
<html>
<head>
<style> 
body {<!--from  w  w  w .ja va2 s . c o m-->
    background: url(http://placehold.it/100x100);
    background-size: 80px 60px;
    background-repeat: no-repeat;
    padding-top: 40px;
}
</style>
</head>
<body>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. 
</p>
<p>Original image: <img src="http://placehold.it/100x100" width="224" height="162"></p>

</body>
</html>

The code above is rendered as follows:

Example

The following example shows how to stretch the background image to completely fill the content area.


<!DOCTYPE html>
<html>
<head>
<style> 
body {<!--from   w  ww  .j  a  v  a2s . c om-->
    background: url(http://placehold.it/100x100);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 40px;
}
</style>
</head>
<body>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. 
</p>
<p>Original image: <img src="http://placehold.it/100x100" width="224" height="162"></p>

</body>
</html>

The code above is rendered as follows: