CSS repeat-x但只需要图像中的一部分

Question

I used background-size: cover for mobile screen sizes.

But, for desktop, if I use background-size: cover , I can't see the cat in my image. Because, the original size of my image is that the height is much longer than the width.

So, I would like to repeat only a partial part of my image that a cat doesn't appear. But, if I use background-size: contain & background-repeat: repeat-x , what I see is the following:

(The cat in the image is appeared three times.)

What I want to do is something like the following: (Repeat only the part on the left & right that cat doesn't appear.)

I googled quite a bit & read several posts in StackOverflow. But, I couldn't find an answer I want. If you could give me any advice, I'd really appreciate it!

* Here are the links for the images:

- [1st] https://postimg.cc/image/6pku8wgcr/

- [2nd] https://postimg.cc/image/rz8gjr4d7/

- [Original Cat Background] https://postimg.cc/image/hcenege97/

Answer 1

And idea is to use multiple background above each other to simulate such effect:

 body { margin:0; min-height:500px; height:100vh; background: /*the main background*/ url(https://picsum.photos/3744/5616?image=742) center, /*repeat the left part*/ url(https://picsum.photos/3744/5616?image=742) 40% 50%, url(https://picsum.photos/3744/5616?image=742) 30% 50%, url(https://picsum.photos/3744/5616?image=742) 20% 50%, url(https://picsum.photos/3744/5616?image=742) 10% 50%, url(https://picsum.photos/3744/5616?image=742) 0% 50%, /*repeat the right part*/ url(https://picsum.photos/3744/5616?image=742) 60% 50%, url(https://picsum.photos/3744/5616?image=742) 70% 50%, url(https://picsum.photos/3744/5616?image=742) 80% 50%, url(https://picsum.photos/3744/5616?image=742) 90% 50%, url(https://picsum.photos/3744/5616?image=742) 100% 50%; background-repeat:no-repeat; background-size:contain; } 

Depending on the image you can adjust the percentage and the number of backgrounds in order to control the repetition. Here is an improvement of the first code to hide a non-needed part on the left by reducing the step of the repeat:

Run and compare this and the previous code on full screen

 body { margin:0; min-height:500px; height:100vh; background: /*the main background*/ url(https://picsum.photos/3744/5616?image=742) center, /*repeat the left part more than the right*/ url(https://picsum.photos/3744/5616?image=742) 45% 50%, url(https://picsum.photos/3744/5616?image=742) 40% 50%, url(https://picsum.photos/3744/5616?image=742) 35% 50%, url(https://picsum.photos/3744/5616?image=742) 30% 50%, url(https://picsum.photos/3744/5616?image=742) 25% 50%, url(https://picsum.photos/3744/5616?image=742) 20% 50%, url(https://picsum.photos/3744/5616?image=742) 15% 50%, url(https://picsum.photos/3744/5616?image=742) 10% 50%, url(https://picsum.photos/3744/5616?image=742) 5% 50%, url(https://picsum.photos/3744/5616?image=742) 0% 50%, /*repeat the right part*/ url(https://picsum.photos/3744/5616?image=742) 60% 50%, url(https://picsum.photos/3744/5616?image=742) 70% 50%, url(https://picsum.photos/3744/5616?image=742) 80% 50%, url(https://picsum.photos/3744/5616?image=742) 90% 50%, url(https://picsum.photos/3744/5616?image=742) 100% 50%; background-repeat:no-repeat; background-size:contain; } 

UPDATE

Here is the code with your image:

 body { margin:0; min-height:500px; height:100vh; background: /*the main background*/ url(https://i.stack.imgur.com/76q2w.png) center, /*repeat the left part*/ url(https://i.stack.imgur.com/76q2w.png) 40% 50%, url(https://i.stack.imgur.com/76q2w.png) 30% 50%, url(https://i.stack.imgur.com/76q2w.png) 20% 50%, url(https://i.stack.imgur.com/76q2w.png) 10% 50%, url(https://i.stack.imgur.com/76q2w.png) 0% 50%, /*repeat the right part*/ url(https://i.stack.imgur.com/76q2w.png) 60% 50%, url(https://i.stack.imgur.com/76q2w.png) 70% 50%, url(https://i.stack.imgur.com/76q2w.png) 80% 50%, url(https://i.stack.imgur.com/76q2w.png) 90% 50%, url(https://i.stack.imgur.com/76q2w.png) 100% 50%; background-repeat:no-repeat; background-size:contain; } 

Answer 2

A gradient could also be used to paint the area where image is not supposed to repeat .

 html { min-height:100vh; background-image: url(https://s25.postimg.cc/kw0l49gz3/original.png), linear-gradient(to top, rgb(116, 164, 61) 27.5%, gray 27.5%, gray 27.6%, rgb(67, 97, 32) 27.6%); background-position:center center; background-repeat:no-repeat; background-size: auto 100%; } 

part of the image itself can be used and stretch if it can match.

 html { min-height:100vh; background-image: url(https://s25.postimg.cc/kw0l49gz3/original.png), url(https://s25.postimg.cc/kw0l49gz3/original.png ); background-position:center center, 10% center ; background-repeat:no-repeat; background-size: auto 100%, 2000% 100%;/* stretch part of image behind the other one with a hudge value*/ }