#14: Full Page Background Image Using CSS

css.svg

Good Evening

The goal here is a background image on a website that covers the entire browser window at all times. We can do this purely through CSS thanks to the background-size property now in CSS3. We’ll use the html element (better than body as it’s always at least the height of the browser window). We set a fixed and centered background on it, then adjust it’s size using background-size set to the cover keyword.


The required CSS code



html{
background:url(http://domain.com/images/bg.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover }
fresh-content.svg

In Conclusion

Using large graphics are a great way to keep people on your page. Make sure your image choice tells a story and relates to the page is is on.

I have 86 post's to go, from my target of writing 100 articles in 365 days !

Sharing is Caring

Start a Conversation

So if you’re looking for knowledge and a rewarding adventure, start a conversion today!


Click to Call:07809765635
Do NOT follow this link or you will be banned from the site!