Search code examples
htmlcssparallax

Background Image filling and resizing to browser window

This is the effect I need for my website:

http://urban-walks.com/#nicer_way

Not the fancy side of it - I have background images for certain 'sections' or divs, and I need them to fill the whole of the browser window. They also need to resize when changing browser side (such as using mobile) so it keeps the effect.

This is my current code for each div -

HTML:

<div class="graph">
    <br><h1>Latest SKE Graph</h1>
    <img src="knowledge_graph.jpg">  
</div>

CSS:

.graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 700px;
text-align: center;
}
Solution

  • Change your height to "100vh" and your width to "100vw". v stands for view-port of the device. 

     .graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
text-align: center;

    }