CSS background-repeat-y

Please Share On:

Definition:

Repeat-y sets the background image repeated vertically only.

Let’s use the following image to set as a background-repeat-y.

Here is an image that I am going to use for each background-repeat-y value listed above.

Syntax:

background-repeat: repeat-y;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat-y{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-origin: padding-box;
  background-repeat: repeat-y;
}

.text{
   padding-top: 100px;
}

</style>
</head>
<body>

<div id="background-repeat-y">
<h3>background-repeat: repeat-y;</h3>
  <p class="text"> Here is an example of image with background-repeat's property value is repeat-y.</p>
</div>

</body>
</html>

Output:


Donate to support writers.



You may be interested in the following topics:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial