React - how to only show half of a background image on tablet and 1/4 on phone

Question

Goal I have a background image that on a computer or laptop browser I want it to show 100% width, but I only want it to show 1/2 of the image if you cut it vertically on tablet and if it's phone I want it to show 1/4 of the image if you cut it vertically.

What I've Tried Tried using clip-path in CSS but that makes it horizontal scroll enabled which I don't want.

On browser should look like this

On Tablet

On Phone

On tablet and phone the rest of the image should not be visible via scroll. It should only allow vertical scroll and that's simply the background.

Answer 1

You can achieve this with media queries and the background-size property.

/* Default (mobile) */
body {
  background: url(https://i.stack.imgur.com/np7c0.png) no-repeat;
  background-size: 400%;
}

/* Tablet and up */
@media only screen and (min-width: 600px) {
  body {
    background-size: 200%;
  }
}

/* Desktop and up */
@media only screen and (min-width: 768px) {
  body {
    background-size: 100%;
  }
}

Here's a demo: https://jsfiddle.net/zxqcgkLp/

---

Note: you may need to play around with your breakpoints, depending on your specific needs. Here's a useful guide from CSS-Tricks that shows common device breakpoints:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/