Prev Next

Background-repeat

Background-repeat property is used to repeat the image both horizontally and vertically.

Values:
Repeat-x : replicates image horizontally
Repeat-y : replicates image vertically
No-repeat : image won’t be replicated

Sample code

<style>
body {
  background-image: url("bg.png");
  background-repeat: repeat-x;
}
</style>

If this background-repeat property is not specified then, by default then the background image is repeated throughout the entire page.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("bg.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

try the other values (Repeat-y and No-repeat: ) too in the editor above

Leave a Comment