Full Screen Responsive Background

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

In Blog, HTML & CSS

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.

1
2
3
4
5
6
7
8
9
10
11
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.

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.

  1. July 29, 2012 at 7:41 PM

    Hy thanks dude it is the same thing which I was looking for since i’m not on advance level of web design so far. But I have little a confusion here is that you put one of a CSS3 property as Background-size.. I want to ask that what if we consider the browser compatibility on this? One more thing is that you picked-up a large image about thousand x thousands of pixels.. what if we got a small image as standard 1024×768 of pixels.. the same thing will be worked on that?

    Many thanks.. it was a useful stuff which I have got by your site after joining your facebook page as todya :)

  2. Wilma Hamlin
    July 29, 2012 at 8:05 PM

    The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.

    There are two types of background-size you can use.

    “Cover” Explained above or “Contain”

    “Contain” Scales the image to the largest size such that both its width and its height can fit inside the content area.

    There are many other techniques.
    Try here http://css-tricks.com/perfect-full-page-background-image/

  3. July 30, 2012 at 8:24 AM

    Hi! Thank you for this tip! I was surfing the web a lot looking for it :)

  4. August 1, 2012 at 8:54 PM

    So nice tutorial. Thanks for the help.

  5. August 2, 2012 at 10:24 PM

    That is pretty awesome, no JavaScript or jQuery. Just good ol CSS

  6. August 6, 2012 at 3:42 AM

    This is a great tutorial – a simple, elegant, graceful way to achieve a really nice effect. Good job!

  7. yashu
    August 16, 2012 at 6:13 AM

    cal u tell image size for this….??

  8. August 22, 2012 at 4:22 AM

    nice code i used this code for all my sites :) thank you

  9. November 29, 2012 at 2:50 AM

    osome tut, I implemented it on my “Under Construction” homepage. Check it out ;)

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 9 Comments On Full Screen Responsive Background, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php