Html Question posted in
Some basic documentation can be found here.

Html – How do I repeat an image on both sides vertically?

I’ve only successfully made the background image go down vertically on the left side of the website. But I haven’t figured out how to make the background image do the same thing to the right of the webpage.

<style>
    body {
    background-image: url('background.png');
    background-size: 950px;
    background-repeat: repeat-y;

    }
</style>

I’ve tried duplicating the image and making it go to the right but that didn’t work. It just ended up messing with the background image to the left go to the center.

Tags:

2

Answers


  1. 0

    If you only want your image repeat vertically but on both sides of your page. You may give 2 same backgrounds but put them on different sides:

    background:
  url('background.png') left 950px repeat-y, 
  url('background.png') right 950px repeat-y;

    Pay attention it’s background but not background-image. It is a shorthand for:

    background-image: url('background.png'), url('background.png');
background-position-x: left, right;
background-size: 950px, 950px;
background-repeat: repeat-y, repeat-y;

    Here’s a live example:

    body {
  background: 
    url('https://picsum.photos/120/120') left 120px repeat-y, 
    url('https://picsum.photos/120/120') right 120px repeat-y;
}
    Login or Signup to reply.
  2. 0

    You can use multiple background images in CSS. This involves specifying the same image twice, once for the left side and once for the right side, and positioning them accordingly.

    One instance of the background image on the left side and another on the right side of the webpage, both repeating vertically. You can adjust the background-size and background-position values as your requirement.

    body {
  background-image: url('https://picsum.photos/200/300'), url('https://picsum.photos/200/300');
  background-size: 100px auto, 100px auto;
  background-position: left top, right top;
  background-repeat: repeat-y, repeat-y;
}
    <!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Background Image on Both Sides</title>      
    </head>
    <body>        
       <!-- Your content here -->
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search