cssbackgroundbackground-sizebackground-repeat

CSS repeat-x BUT only a part I want in an image

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:

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

What I want to do is something like the following: what I want (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/

Solution

  • 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.sstatic.net/76q2w.png) center,
   /*repeat the left part*/
   url(https://i.sstatic.net/76q2w.png) 40% 50%,
   url(https://i.sstatic.net/76q2w.png) 30% 50%,
   url(https://i.sstatic.net/76q2w.png) 20% 50%,
   url(https://i.sstatic.net/76q2w.png) 10% 50%,
   url(https://i.sstatic.net/76q2w.png) 0% 50%,
   /*repeat the right part*/
   url(https://i.sstatic.net/76q2w.png) 60% 50%,
   url(https://i.sstatic.net/76q2w.png) 70% 50%,
   url(https://i.sstatic.net/76q2w.png) 80% 50%,
   url(https://i.sstatic.net/76q2w.png) 90% 50%,
   url(https://i.sstatic.net/76q2w.png) 100% 50%;
  background-repeat:no-repeat;
  background-size:contain;
}