Search code examples
htmlcsscss-backgrounds

Static image backrgound and scrolling content css

I would like to create a web page where there the background needs to say the same during the entire scroll. So, the real content of the webpage would feel like floating over the background.

Sorry I don't have any examples, but it would be like what Apple does sometimes when presenting their iPhone chip : for some time the page stays with the same electronic-circuit backgnd but chip specs like its speed keep appearing and scrolling

Solution

  • You can simply use:

    body {
    background-image: url("...");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; /* This is what makes the background seem to be staying in the same position */
 }

    However, if the background is very large, it may cause the scrolling effect to be slower.