Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS - background-repeat


previous next AddThis Social Bookmark Button


Advertisements

Description:

background-repeat defines the directions in which a background image will be repeated (if any).

Possible Values:

  • repeat: Causes the background image to be repeated along both the horizontal and vertical axes.
  • repeat-x: Causes the background image to be repeated along the x axis.
  • repeat-y: Causes the background image to be repeated along the y axis.
  • no-repeat: Prevents the background image from being repeated at all.

Applies to:

All the HTML elements.

DOM Syntax:

object.style.backgroundRepeat="Any of the above values";

Example:

Following is the example which demonstrates how to repeat the background image if image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.

By default background-repeat property will have repeat value.

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat;">
<tr><td>
This table has background image which repeats multiple times.
</td></tr>

</table>

To Become more comfortable - Do Online Practice

Following is the example which demonstrates how to repeat the background image vertically.

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat-y;">
<tr><td>
This table has background image set which will repeat vertically.

</td></tr>
</table>

To Become more comfortable - Do Online Practice

Following is the example which demonstrates how to repeat the background image horizontally.

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat-x;">
<tr><td>

This table has background image set which will repeat horizontally.
</td></tr>
</table>

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements