background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
|
repeat -
The background image is repeated both vertically and horizontally, and this is a default value
repeat-x - The background image is repeated only horizontally
repeat-y - The background image is repeated only vertically
no-repeat - The background-image is not repeated.
space -
The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round - The background-image is repeated and squashed or stretched to fill the space without gaps
|
<style>
.background-image { background-image: url(tiles.jpg); height: 50rem; width: 100rem; } </style> <div class="background-image"></div> |
<style>
.background-image { background-color: #999999; background-image: url('tiles.jpg'); background-repeat: no-repeat; height: 50rem; width: 100rem; } </style> <div class="background-image"></div> |
<style>
.background-image { background-color: #999999; background-image: url('tiles.jpg'); background-repeat: repeat-y; height: 50rem; width: 100rem; } </style> <div class="background-image"></div> |