Image Position Help

Hello guys!, need a bit of help
So I’m working on this web page, I’ve managed to make the background image cover the whole browser width, but the problem I’m facing is, the entire image isn’t shown, only the top part of it, is there a way I can scale the image so that the whole image resizes according to the browser width?

https://codepen.io/goprime/pen/YrMqvK

and here’s the image

any help would be highly appreciated, thanks!

Won’t you run out of width then or screw up the aspect ratio?

Using contain will ensure the whole image is always shown, otherwise, as @lynxlynxlynx says, you’re going to have width/aspect ratio issues.

There isn’t some magic wand you can wave here to fix it: the image is tall and thin, you can’t make it not be tall and thin without editing it. Some viewports will also be tall and thin (a phone in portrait mode), and it will kinda work (and only kinda, differences in aspect ratio will still slice bits off). Some will not be tall and thin, and for those, it will “break”.

Either you make it bigger than any possible size (you can use background-size for this), have the edges extend beyond the viewport , then center it so most of the time the bit you want is in view. Or you have two or more images, and you use a media query to swap them in or out.

You’re on the web, and you cannot control the size of viewport a user will use. Full-page background images that need precise placement don’t really work on the web - you don’t have control over the format, unlike with print. You can precisely size the whole web page - ie give it a defined width and height, which would let you always place the backgroud image the way you want, but by doing that, your page will break for most users, who will not be viewing it at the size you want. Or you can use a more abstract background image, where placement doesn’t matter.

1 Like
.bimg {height: 150vw}

Understood, thanks for the explanation!

it didn’t work, but yeah I changed to another image that fitted better, thanks for taking the time to help!