gaurav1998
gaurav1998
Explore posts from servers
KPCKevin Powell - CommunityPPrismaDTDrizzle Team
PostsComments
KPCKevin Powell - Community
Created by gaurav1998 on 7/3/2024 in #front-end
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?
3 replies