Good day. The task is as follows.

There is a code.

The task is that, depending on the width of the screen and its height, the block is always in the screen either at 100% of the width or at 100% of the height. Moreover, block sizes should always be proportional to the size of the background. How to do it?

Here is the code itself

body { font-family: 'San Francisco', Arial; } .container { height: 100vh; width: 100%; max-width: 1920px; background: url('http://nubilonline.savgroup.ru/bg_1.png') no-repeat center; background-size:contain; } .container > .header { border: 1px solid red; height: 3vh; } 
 <div class="container"> <div class="header"> header line </div> <div class="content"> </div> <div class="footer"> </div> </div>

Here are graphic examples of what I'm talking about.

http://nubilonline.savgroup.ru/pic1.PNG http://nubilonline.savgroup.ru/pic2.PNG

  • As I understand it, these are some menu elements, in which case they need to be leveled from that corner of the screen where they are, and in principle it will be like in the picture - pnp2000
  • How to initially make the block itself have the width and height of the background? - Pavel Zhukovsky
  • .container {background-size: 100%; background-position: top; } + .header {width: 100%; margin: 0 auto; } =) for example - HamSter

2 answers 2

So, as I understand it, you can do so, set the background-size: 100%, and set the block, for example, margin: auto; width: calc (100% - 40px); height: calc (100% - 20px); and ready, if there is a block with a background and there is another block in it, then it will always decrease with the image.

    Found a solution, but on JS

    Here is an example http://nubilonline.savgroup.ru/page1.php

    Is it possible to do the same on CSS?