Web Tutorials

</>   CSS Tutorial

CSS

Cascading Style Sheet

Background-Repeat

Defines how the background image repeats itself across the element's background, starting from the background position.

  1. background-repeat:repeat;
    The background image repeat itself both horizontally and vertically.

  2. background-repeat:repeat-x;
    The background image will repeat only horizontally.

  3. background-repeat:repeat-y;
    The background image will repeat only vertically.

  4. background-repeat:no-repeat;
    The background image will repeat only one.
Example
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .img
{
background-image: url("images/skillpundit-exploreimg.png");
 }
.img1
{
background-image: url("images/skillpundit-exploreimg.png");
background-repeat: no-repeat;
 }
.img2
{
background-image: url("images/skillpundit-exploreimg.png");
background-repeat: repeat-x;
 }
.img3
{
background-image: url("images/skillpundit-exploreimg.png");
background-repeat: repeat-y;
 }
 </style> </head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="900" style="border:1px solid #FF3300;">
<tr>
<td width="200" class="img" height="159">
  </td>
<td width="250" class="img1" height="159">
  </td>
<td width="250" class="img2" height="159">
  </td>
<td width="250" class="img3" height="159">
  </td> </tr>
</table> </body> </html>
Output

Click for Download Image Images Zip

Skillpundit-CSS-Background Repeat