enter image description here

Salute, fiesta! There is a background in the browser, drawing boards. How can I make it so that when adding information to a page, the image is loaded along with the content? That is, when scrolling the page, the background always remained, and not like in the screenshot. Is this some kind of css container property? In the HTMLbook did not find anything like that unfortunately. And can this be done somehow easier, without including JS here? An example of a container with a picture connection is indicated below.

body { background: url(imgs/background_page.png) no-repeat; -moz-background-size: 100%; -webkit-background-size: 100%; -o-background-size: 100%; background-size: 100%; }

    2 answers 2

    Set the background-size value to "cover", and the "fixed" value for background-attachment will make the picture still when scrolling. In any case, try experimenting with the values ​​to find a better option for yourself.

     body { background: url(imgs/background_page.png) no-repeat; background-position: 50% 50%; background-size: cover; background-attachment: fixed }
    • Thank you, I found for myself what was needed! Tick ​​you. - SnoopDoggyDog

    You can set body size to 100% :)

     .page { width: 100%; height: 100%; }
    • added page class to current body, used your code, did not help :( - SnoopDoggyDog
    • And it would be nice to see html itself. There is another property such background-size: cover; . You can try it. - AnnGabr