Kevin Powell - Community•3mo ago

Why does this background image appear as 180px wide?

Codepen: https://codepen.io/Gaurav-Narayan-Varma/pen/zYQggZj I am attempting to a scale an image along both axis' by 2 while settings its width to the screen size, which in this case is 360px in width. I have the following code: HTML: <div id="background"></div> CSS:

body {
  margin: 0
}

#background {
  background-image: url(https://i.ibb.co/9GQ0wXh/background.png);
  width: 50%;
  height: 256px;
  background-size: cover;
  transform: scaleX(2) scaleY(2);
}

body {
  margin: 0
}

#background {
  background-image: url(https://i.ibb.co/9GQ0wXh/background.png);
  width: 50%;
  height: 256px;
  background-size: cover;
  transform: scaleX(2) scaleY(2);
}

The width of 50% should cut the div down to 180px from 360px, while the scale of 2 should bring it back up to 360px. However, as you can see in the codepen the background image does not expand to fit the width of the screen (even though in devtools it will say it has a width of 360px). Any idea what the issue could be here?

2 Replies

Kevin Powell•3mo ago

I need to start by asking why you're making it 50%, then scaling it back up? It looks like you changed the codepen code, but the issue, I think, is when you scale, it's doing it from the center of the element, adding transform-origin: left would probably fix it

gaurav1998•3mo ago

transform-origin: left fixed it! The problem was actually that I scaled the image by 2 first and then didn't like how it created horizontal scroll. Thus, to eliminate the horizontal scroll and bring the width down from 720px to 360px I applied a width of 50%. I think the better approach for next time would be to use overflow-x-hidden for a wrapper to eliminate the horizontal scroll

Gaming

Programming

Why does this background image appear as 180px wide?