Tutorials HTML and CSS Tutorials Full Screen Responsive Background

Full Screen Responsive Background

photoshop-plus Tutorials Jul 30, 2012

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;


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.


Richard Carpenter

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.

subscribe to newsletter