I stubled upon this website and I would like to know how the design was made:

https://www.zoolana.io/home

There's a background image and some text in the middle, the interesting thing is that no matter how much you zoom in or out, the size of the background image stays the same, only the content changes. How can I replicate the same structure?

CodePudding user response：

This is done by specifying the size of the element in units of viewport height (vh) and/or viewport width (vw).
In the case of your example, the logo in the center is set to width: 55vw, meaning 55% of the viewport's width. The background image is set to height: 100vw, meaning 100% of the viewport's height.

CodePudding user response：

set background-size to cover of div having full width, height & image as background.

*{
    margin:0px;
    padding:0px;
}
div{
    color:white;
    background-image:url("https://images.unsplash.com/photo-1644665154099-57f1f473b0cb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80");
    width:100vw;
    height:100vh;
    background-repeat: no-repeat;
        background-size: cover; /* This to make background image size to cover all dimension of div element.*/
}

<div>
  This is testing
</div>

CodePudding user response：

The background image can be set to cover the element’s entire background area or have actual dimensions. A background image can be set to cover the entire element’s background area using the

.centre-section-home
}
background-position: 50% 100%;
background-size: cover;
background-repeat: no-repeat;
}