Loading...

Full Screen Responsive Background

Full Screen Responsive Background

Thinking about creating a portfolio? why not impress your visitors with a nice responsive full screen background image.

Related Posts:

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.

html {
min-height: 100%;
background-size: cover;
background-image: url(test.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
body{
min-height:100%;
}

 

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.

CSS3 Full Screen Background Image - Dreawmeaver CS6 Tutorial

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

About the author

Copyright © All Rights Reserved