I want to do everything semantically correctly (i.e., without extra divs, etc.). At the moment there is a rule in css:

html {background-image: url('../images/news.jpg'); background-repeat: no-repeat; background-attachment: fixed; }

Problems:

  1. How to properly adjust the height of the picture? Picture size: 1200 x 1550. It is necessary that the picture is correct (i.e., full width and height) displayed on most screens with very different resolutions (which is why it is so high) It is important that the picture is> the height of the screen. For example, like me (15 inches, 1280 x 800) the picture is not fully visible, but only that part that fits on the screen. In this case, the problem of adding a footer arises: the footer went to the very bottom of the picture, i.e. it is not visible on the screen.
  2. How to make the background for wider screens than mine? Stretch the background - it seems to be the wrong way to distort the image. If you make a wider background, then how to configure it for most screens to display the full width of the background?
  3. I'm trying to work with a background size of about 1-1.5 MB. Is this too much for Internet browsers (i.e., you may have to wait a long time until the entire web page is loaded)?

    3 answers 3

    1. You can correctly adjust the height either by creating backgrounds for all resolutions (there are not so many of them), or using <img src="" /> . Stretching / compressing the background image is a css3 chip, therefore not all browsers support it.
    2. see above.
    3. It's awesome a lot. For a background image of 2 megapixels (1920x1080), you can fit in 300-600kb. This is also a lot because when resizing with HTML tools, it will quickly work only on browsers with hardware acceleration support.
    • If you create backgrounds for all permissions, then, as I understand it, you will have to programmatically determine (using Javascript, for example) the client's permission, and insert the corresponding background. Is it really impossible to do only by means of css and html? - almac
    • Can. I have already written how and what will be the difficulties. "Down", on the background - img , he set the height and width. src is the largest drawing (by the largest resolution). Up is a div with a big z-index or a big negative margin that contains the rest of the site. Braked will, I guarantee it. - knes
    • The fact is that I try to adhere to the rules of semantic vertica, according to which it is impossible to simply insert img into html for design (something like a principle). The question of the width was decided by making the picture wider and aligning it in the center: html {...; background-position: center top; ...} The problem remains in height: the picture is larger than the screen, and I need to “trim” it in the same place where the screen ends, but so that the footer block can be normally attached at the bottom of the page .. - almac
    • A picture would see! - Palmervan
    • Crop can be done by inserting a picture in the block, which indicate overflow: hidden. I didn’t quite understand the layout principles. :) - knes

    It remains to fasten the footer to the bottom of the screen so that under any conditions it remains at the bottom of the screen (I don’t know how to do it yet).

    It is necessary that the footer was always below and visible? position: fixed; bottom: 0px;

    This will be good for the little footer informer.

    or should the footer be tied to the bottom of the picture?

    • Thank! Already footer tied: position: absolute; bottom: 0; So it is located at the bottom of the page, in a non-browser window. - almac

    I hope that this is a universal solution that will be used in the future. So, to make a background that fits different resolutions, you need:

    • The height and width make the picture as large as possible (for example, 2000 x 1550 like mine). Next you need to align the image in the center:

       html { background-image: url('../images/news.jpg'); background-repeat: no-repeat; background-position: center top; overflow: hidden; }

    • So that the browser doesn’t have to load the image for a long time, compress it (I managed to compress it from ~ 1.5Mb to ~ 500Kb)

    • It remains to fasten the footer to the bottom of the page ( position: absolute; bottom: 0; )