Full Screen Responsive Background

photoshop-plus

Jul 30, 2012

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

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

Hi! Im Richard Carpenter and Im a Freelance Web and Graphics Designer from England. I am also a Regular Blogger, Tutorial Writer, and owner of Photoshop Plus. Photoshop Plus is his 2nd personal blog about all things photoshop. On a weekly basis he write tutorials, articles and freebies.