CSS background-repeat-x

Please Share On:

Definition:

Repeat-x sets the background image repeated horizontally only.

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

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

Syntax:

background-repeat: repeat-x;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat-x{
  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-x;
}

.text{
   padding-top: 100px;
}

</style>
</head>
<body>

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