'Keep same image size while zooming in/out of a website
I stubled upon this website and I would like to know how the design was made:
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?
Solution 1:[1]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | CrookedJ |