Picture scaling (background?)

[NorseMan]

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?

 

[Michalio]

you can do it with background property:

.header-image{
    background-image: url('<url here>');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

Did you work on koozai.com? Because someone spend a lot of time to make a javascript code to calculate position of each element instead of using the flexbox in css.
You can read about flex and more css tricks (to avoid repeat someones mistakes) here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

[NorseMan]

No no... I just came over the site, and I have wondered for a long time "how do they do it". So, when I came over that site i took the chance asking you guys.

 

[NorseMan]

you can do it with background property:

.header-image{
    background-image: url('<url here>');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

Can I use this on a bigger image to? Like an image covering the whole background?

 

[Michalio]

when you use "background-attachment: fixed" and "background-size: cover" then the image will be on the whole page so it should be a larger image.
If you want to use smaller image then you will should to use "background-size: 100% auto" to match only the width