Picture scaling (background?)

[LeonLatex]

Not sure if this fits here on CSS or under HTML, but chose to place it here as I reckon it is some CSS magic formula. If you go to www.koozai.com you will see the image at the top of the page (background image?). No matter what resolution I use, or what size browser it is, the image follows in scaling, is just as sharp and clear, is just as detailed and shows the same thing. How do they do it?

[maxxd]

If you're talking about the page background with the logo on the wall and the lamp; it's set up in the CSS using media queries. Inspect the element and resize the browser window; you'll see it's serving different images at different browser widths - this is a common practice in modern web development.

[kicken]

In addition to the media queries to serve different resolutions of the image, it uses background-size: cover; to make whatever the current image is fit the space.

[LeonLatex]

I see the possibilities and benefits of using that way to do it as well, but that is not what is directly done in the example I am referring to, or ....?
I also got a tip from another that I can use CSS background property and I could use flexbox as well. But those answers were so short so I think there
are a lot of not told, or information falling out. But as I see it, both three ways (😜) got their benefits. 'Maybe it depends on how I use them?
I say both three ways (to be a little ironic) because I am sure there is more than one way to handle this, but what is the best way depending
on whom told you to use which? OR am I totally wrong?

[kicken]

2 hours ago, LeonLatex said:

but that is not what is directly done in the example I am referring to, or ....?

I'd suggest spending some time learning how to use the developer tools so you can look at something like this and see how it's being done.  In this case, assuming there's not some mis-understanding to what you're referring, it's simply three things:

1. Multiple versions of the background image served with @media rules.  This allows for crisp images at various screen sizes.
2. Telling the browser to make the background image fit the element exactly by using background-size: cover
3. Applying the background image to an element that is the size of the browsers view port and positioned below the rest of the page content.  See position: fixed, vh/vw units, z-index / stacking contexts.

 

[maxxd]

I''m pretty sure there was no information falling out - the person you were talking to was more than likely talking about at least two completely separate things. Flexbox has nothing at all to do with backgrounds; it's a two-dimensional layout system.

Browser CSS support has gotten strong enough that CSS can do a lot of things these days (certainly much more than it could even just a short few years ago) and those things can affect pretty much every aspect of a page. Take some time to learn the basics. Even if you're a dedicated back-end developer working with a dedicated front-end developer, knowing how a page is structured and what can be done with that structure can help you determine how to collate and present to the front-end the data you pull from the back-end.