The other day we looked at 10 Awesome Websites With Full-Screen Background Images<\/a>.\u00a0 At the beginning of the article I had mentioned that there were a few ways of approaching this effect, some developers prefer to do it with jQuery, some with CSS, and others with Flash.\u00a0 In this article, we\u2019re going to take a look at how to achieve a full-screen background image with CSS.<\/p>\n

CSS3 allows us to choose between a few different values for the \u201cbackground-size\u201d property.\u00a0 The properties are length, percentage, cover, and contain.\u00a0 The value that we\u2019re going to use first is the \u201ccover\u201d value, which will scale an image to a size that will allow it to fill the content area.\u00a0 I would like to point out that in doing this some parts of the image may be cut off depending on the screen resolution or dimensions of the browser window.\u00a0 Centro Genesis<\/a> is a good example.\u00a0 Look at how the background image displays in a widescreen browser.<\/p>\n

<\/a><\/p>\n

Now, look at how the image appears in a traditional square browser. The majority of the photo is the same, it just cuts off a piece of it in order to fill the height of the screen.<\/p>\n

<\/a><\/p>\n

The code for this is method is really quite simple.\u00a0 All you have to do is insert these few lines of CSS in your external CSS file or in the head of your page.<\/p>\n

html {
\nbackground: url(images\/bg.jpg) no-repeat center center fixed;
\n-webkit-background-size: cover;
\n-moz-background-size: cover;
\n-o-background-size: cover;
\nbackground-size: cover;
\n}<\/p>\n

That was easy.\u00a0 Now let\u2019s take a closer look at what we did.\u00a0 With the first line we\u2019re calling in our background image and applying some style to it, \u201cbackground: url(images\/bg.jpg)\u201d is pulling up our actual image.\u00a0 Then \u201cno-repeat\u201d is telling the browser to not repeat the image, \u201ccenter center\u201d is telling the browser to center the image horizontally and vertically, and \u201cfixed\u201d is telling the image to fix itself in that position and not scroll with the rest of the content on the page if there is a need to scroll.\u00a0 After we\u2019ve called the background image and styled it we target all of the major browsers, webkit covers Safari 5+ and Chrome, Moz is Mozilla Firefox 4+, -o is Opera, and the plain and simple background-size with no prefix takes care if IE9+.<\/p>\n

This technique is simple and works, but you\u2019re relying on one image to please all resolution sizes.\u00a0 How do you decide what dimensions to use for your one background image?\u00a0 If you have an image that\u2019s 1900px wide and someone\u2019s trying to view your site on their mobile phone, the image may take quite some time to load.\u00a0 But if you try to shoot the gap and go with an image that\u2019s around 1,000px wide then the image may become pixilated and blurry to anyone viewing your site on a widescreen monitor with the resolution set to 1440px.\u00a0 And chances are even at 1,000px it\u2019s still going to take that mobile viewer a while to fully load your site because of your large background image.<\/p>\n

Before you curse the variables like screen resolution and monitor shapes that can make our jobs so frustrating at times, allow me to give you the answer you\u2019re looking for: media queries.\u00a0 CSS will allow you to define different attributes for various parameters.\u00a0 In other words, you can set a media query that tells a browser to load a largeBG.jpg, mediumBG.jpg, or a smallBG.jpg depending on what the browser dimensions of the viewer are.<\/p>\n

For example, rather than defining your background image within the HTML of your site let\u2019s say you create a div for your page and assign it the id of \u201ccontainer\u201d.\u00a0 Pretty standard.\u00a0 Much like we did in the first method, we\u2019re going to assign our \u201ccontainer\u201d div id with our background image, add some style, then tell it to cover.\u00a0 I would recommend making your \u201clargeBG.jpg\u201d image somewhere in the ballpark of 1440px wide to 1900px wide.<\/p>\n

#container{
\nbackground: url(images\/largeBG.jpg) no-repeat center center fixed;
\n-webkit-background-size: cover;
\n-moz-background-size: cover;
\n-o-background-size: cover;
\nbackground-size: cover;
\n}<\/p>\n

Now that we\u2019ve got the big version of our background image set, we can move on to the medium.\u00a0 This is a little different as we\u2019re going to have to do a media query to tell the browser to load a smaller version of our background image.\u00a0 I typically set a media query for a screen resolution width of 1024, as this is the resolution of an iPad and the possibility of the viewer relying on a network rather than high speed wifi to load the page.\u00a0 To set a media query for 1024 you simply add this line in to your CSS.<\/p>\n

@media only screen and (max-width: 1024px) and (orientation:landscape) {
\n#container { background: url(images\/mediumBG.jpg) 50% 0 no-repeat fixed; !important; background-size: 100% auto;
\n-webkit-background-size: cover;
\n-moz-background-size: cover;
\n-o-background-size: cover;
\nbackground-size: cover;
\n}
\n}<\/p>\n

The background-size properties are somewhat optional at this point.\u00a0 You can\u2019t adjust the resolution of your iPad, but you have to remember that this media query is not specifically targeting iPad\u2019s, it\u2019s targeting that screen resolution.\u00a0 Since there are surely still a large portion of web surfers on older monitors set in the ballpark of 1024×768, it\u2019s an easy enough step to enhance their viewing experience a little more.<\/p>\n

After defining the landscape view for iPad\u2019s let\u2019s make a media query for the portrait view.\u00a0 Depending on your image, you may want to consider putting in a cropped, taller version of your image here so that it display\u2019s full screen without getting too distorted and pixilated.\u00a0 You\u2019ll also want to adjust the positioning to make sure the image stays aligned properly.<\/p>\n

@media only screen and (min-width: 768px) and (max-width: 991px) {
\n#container { background: url(images\/mediumTallBG.jpg) 50% 80% no-repeat fixed !important
\n-webkit-background-size: cover;
\n-moz-background-size: cover;
\n-o-background-size: cover;
\nbackground-size: cover;
\n}
\n}<\/p>\n

Finally, we can set another media query for mobile devices.<\/p>\n

@media only screen and (min-width: 0px) and (max-width: 767px) {
\n#container { background: url(images\/smalBG.jpg) 50% 80% no-repeat fixed !important; background-size: auto !important;
\n-webkit-background-size: cover;
\n-moz-background-size: cover;
\n-o-background-size: cover;
\nbackground-size: cover;
\n}
\n}<\/p>\n

I would encourage you to play around with these tricks and leave a link to the page you\u2019ve created in the comments section below so we can all see what you\u2019ve come up with.<\/p>\n

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder<\/a>. Follow him on Twitter @TheScottStanton.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

The other day we looked at 10 Awesome Websites With Full-Screen Background Images.\u00a0 At the beginning of the article I had mentioned that there were a few ways … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[6,2132,47,30],"tags":[],"aioseo_notices":[],"yoast_head":"\n