title: Repeating edges of image upon user zooming out
body: <p>I have an image I want to be the full width of my screen for my wordpress website. I also want to make it so when the user zooms out it takes the edges of that image (for example lets say the image is of width 800, then it would take the 0-100 px on the left side and maybe the 700-800 px for the right) and repeat those, as well as being responsive. I figure thats impossible with strictly code so if I had photoshopped the edges I want repeated, how would I go about overlaying these 3 images and having them behave accordingly. Is this possible? the picture is basically of the sky, and its mostly clear with maybe a cloud so it would look ok repeated :)</p>
  
  <p>I haven't tried it with code and I'm a bit newby to css so I would love some advice on how to do it! Right now I just have a div class with a background url and its width is 100% but it repeats when I zoom out. </p>
  
  <p>Here's an image of what I'm talking about:
  <img src="https://imgur.com/xqjsub8.png" alt=""></p>