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

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/

Thanks for the comment! I added links that people can download the images. — Lim, Aug 05 '18 at 09:36
I meant the original image of the cat not the one after it get repeated — Temani Afif, Aug 05 '18 at 09:38

Temani Afif · Accepted Answer · 2018-08-05T09:48:21.917

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;
}

@G-Cyr No I didn't forget :p check the edits, the image was different ;) — Temani Afif, Aug 05 '18 at 10:01

score 1 · Answer 2 · edited Aug 05 '18 at 10:04

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*/
}

by the way, I would have done the gradient like this ;) https://jsfiddle.net/0ryz3vkx/4/ — Temani Afif, Aug 05 '18 at 10:10

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

2 Answers2