The
background-repeat property allows to specify how the background image is repeated.
The possible values are.
| Properties | Description |
|---|
no-repeat | only one instance of image will be rendered. |
repeat | the image is rendered in both horizontally and vertically. |
repeat-x | the image is repeated only horizontally. |
repeat-y | the image is repeated only vertically. |
snippet
<html>
<head>
<style>
p {border: 1px solid #000000;width:300px; height:250px; background-image: url(bg.jpg)}
</style>
</head>
<body>
<form>
<p style="background-repeat: repeat-x">
Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos
harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum
blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</p>
<p style="background-repeat: repeat-y">
Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos
harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum
blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</p>
<p style="background-repeat: repeat">
Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos
harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum
blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</p>
</form>
</body>
</html>
