Search code examples
cssimagebackground-imagescaling

background image scaling. with changing the size accordingly

Im making a website and i want to have an image in the background. but using it just in background-image makes it so that its glued to the sides of the window and if i would switch to the phone it would be compressed sideways and i dont want that to happen.

I was thinking that it would be good if i would have an image that is making the bigger side of the window its side accordingly. so if the horizontal side is bigger on window, the horizontal side of the image would change into that and the other side would scale accordingly. but its just my idea, and i'm open to better ones. im also bad at coding so please if you,ll be ansvering dont expect that i will understand :P.

P.S. sorry if i had used incorrect grammar, and idk how to use this site, so sorry for bad modyfication of the text and so on.

thats what im using now and its not how i wanted to do it but im trying many things on my own

`#bgimg
{
object-fit: fill;
position: absolute;
}
#bg
{
overflow: hidden;
height: 92vh;
width: 100%;
position: relative;
}`
Solution

  • You can try with:

    body {
  background-image: url("https://images.unsplash.com/photo-1682685796063-d2604827f7b3?auto=format&fit=crop&q=80&w=1740&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

    Change the background-image property from url("https://images.unsplash.com....") to url("the-image-you-want.jpg")