How To Repeat Background Image Vertically And Horizontally Using CSS

Trang chủ » Html Background Image Stretch Vertically » How To Repeat Background Image Vertically And Horizontally Using CSS

Có thể bạn quan tâm

In this article, we are going to discuss the background image repeat property of CSS. Also, we are going to discuss how to repeat the background image in horizontal and vertical directions.

The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not.

Background-repeat: This property is used to repeat the background image both horizontally and vertically. The last image will be clipped if it is not fit in the browser window.

Syntax:

background-repeat: repeat|repeat-x|repeat-y| no-repeat|initial|inherit;

Example 1: Let’s repeat the image horizontally. Here we are going to use the same property which we used previously.

The repeat-x property is used to repeat the background image horizontally.

Syntax:

element { background-repeat: repeat-x; }

We are also the size of the background image using the background-size property.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png"); background-size: 150px; background-repeat: repeat-x; } </style> </head> <body> </body> </html>

Output: As you can see in the output the image is repeating horizontally now.

Example 2: Now let’s repeat the image vertically. The repeat-y property is used to set the background image repeated only vertically.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png"); background-size: 150px; background-repeat: repeat-y; } </style> </head> <body> </body> </html>

Output: Now the image is repeating vertically.

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

author iamabhishekkalra Follow Improve Previous Article How to Create an Image Gallery with a Horizontal Scrollbar using CSS? Next Article

Từ khóa » Html Background Image Stretch Vertically