We are reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.

Full Screen Responsive Background

Full Screen Background

The majority of people would achieve this effect by implementing jquery and a third party plug-in. The code I’m about to explain is just CSS which delivers the same results. The code looks like this.

[code type=css]
html {
min-height: 100%;
background-size: cover;
background-image: url(test.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}

body{
min-height:100%;
}
[/code]

The interesting CSS attribute we are using is “Background-Size:Cover”, this attribute scales the image to the smallest size such that both its width and its height can fit inside the content area.

Check Out The Demo

You can see how it performs by checking the demo below.

Try it out for yourself, feel free to post up your examples in the comments area below.

Conclusion

Thanks for taking part in this quick tutorial, if you have any questions feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

Author: Tom ClaytonTom loves to write on technology, e-commerce & internet marketing. Tom has been a full-time internet marketer for two decades now, earning millions of dollars while living life on his own terms. Along the way, he’s also coached thousands of other people to success.