Sometimes the simplest web design tasks can be the most aggravating! When you need a background image that looks consistent across browsers, there are about 100 ways to do it wrong and a very simple technique for getting it right.
Most tutorials focus on complex CSS or using the <body background="some-image.jpg"> attribute. In practice, a very simple CSS solution exists without the use of any webkits or other complex code.
One mistake that most make is that the background image is not large enough to cover the screens of desktop browsers. Screen sizes are growing, so I like to start with a large image size. Because it’s a background image, you can compress the image pretty aggressively and still get the effect you want without using a large file size. In the below tutorial for adding a full screen image background, the image size is 2560 x 1920.
The simple technique below has been tested to work on IE7+, Opera (all), Chrome (all), Firefox 3.6+. So this code applies to about 99% of all web browsers in use today. As far as mobile browsers go, this has been tested on iOS 4.3+ and Android 2.1+
The Background Image Code
The following is a very simple CSS solution that you can test. The complete HTML is included so you can copy and paste into a new document and test immediately. The image below is from Wikimedia:
[html]<!–<span class="hiddenSpellError" pre=""–>DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title> CSS Full Background Tutorial</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Oswald);
body {background:url(‘http://upload.wikimedia.org/wikipedia/commons/e/e7/Sky_with_puffy_clouds.JPG’) no-repeat center center fixed;}
#wrapper{width:900px;margin:0 auto;}
.bigtitle{font-family: ‘Oswald’, sans-serif;font-size:80px;color:#000;text-transform:uppercase;text-shadow:4px 1px 1px #444;text-align:center;margin-top:200px;opacity:0.7;}
</style>
</head>
<body>
<div id="wrapper">
<h2> What lovely clouds!</h2>
</div>
</body>
</html>
<!–If you just want the style tag:–>
<style type="text/css">
body {background:url(‘http://upload.wikimedia.org/wikipedia/commons/e/e7/Sky_with_puffy_clouds.JPG’) no-repeat center center fixed;}
</style>
[/html]Breaking Down the Code
Let’s take a look at the core of our CSS that we need to examine:
[html] body {background:url(‘http://upload.wikimedia.org/wikipedia/commons/e/e7/Sky_with_puffy_clouds.JPG’) no-repeat center center fixed;}[/html]First of all, we are assigning this CSS to the <body> tag. You can go up a level and assign this to the <html> tag, but that may not work in all browsers. There is a background-image CSS attribute, but the above is short-hand, which is always desirable when possible.
Next is the URL designator, which we have pointing to the cloud image from Wikimedia. Again, this image is 2560 x 1920, so it’s plenty large to cover most desktop screens. You can point to an image file on your site or use the full URL to point to it. For example, if this image were on my server, I could use the following code instead:
[html] body {background:url(‘images/clouds.jpg’) no-repeat center center fixed;}[/html]
The next element is the “no-repeat” which tell the browser not to tile the image if the browser window is larger than the image size.
The “center center fixed” elements define where the X and Y coordinates are for the image and then tell the browser to hold the image in place. By centering the image, we get consistent results across browsers. It’s not required and can be omitted, but it’s worth including just to show how to change the position of the image. Fixing the image means it won’t move if the user has to scroll down the page.
You can omit the “center center” part of the code and replace with X, Y coordinates or just not use them at all. But it is critical that you use the fixed tag to hold the image in place.
We can also add CSS3 support to that
[sourcecode language="HTML"] body {background:url(‘http://upload.wikimedia.org/wikipedia/commons/e/e7/Sky_with_puffy_clouds.JPG’) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
[/sourcecode]
This background-size CSS property specifies the size of the background image and makes it compitable for any browser that supports CSS3 such as firefox, Opera, Chrome and Safari.
Take a look at more of what can be accomplished with a beautiful code for full page image backgrounds:
There has been many post written regarding creating full background image. Here are some that you will find useful :
- CSS3 background-size: full-screen background images that scale & crop
- Background-size
- IE Problems with CSS3 ‘background-size: cover’ and IEFilters
Comments
Due to a high number of spam comments on site we have disabled comment system at desizntech.info. In a few days comments will be available again after we delete spam.