Have background img zoom at >= 900px width ? CSS/JS

HTML-CSS
1

Whats up guys!

I’m stuck.

I am creating a website where the main page’s picture has a max height of 600px so everything looks great with the images I’ve loaded until the screen width expands past 900px, then my image starts to stretch.

I want my image to begin zooming in at 900px to preserve the quality and max height, kinda like this websites main image does (even though this image takes up the full page, right before the width expands to fit the full screen, the image begins to zoom in:

right now my #img css looks like this:

#img {

background-size:cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
max-height: 600px;

}
How can I make this happen? Thank you guys.

2

How large is your image?

On the sample site you linked to, they’re using an image that is 1500 x 994 pixels large. So there’s enough size here to cover most monitors. It’s also a JPG format, and the image does not have any sharp lines and an underwater scene so they can compress the image a lot and still get it to be a low file size (actually, they have a 300K or so file, this can probably be further reduced).

Maybe you just need to use a larger image for your site?

1 Like
3

Hey, here’s a better example of what I’m trying to achieve.

Notice the height is fixed and if you start expanding your browser, the img begins to zoom in? How do you get this result?

4

Just look at their code.

.hero__media, .hero__image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}