SEARCH
  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;
}
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

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