How to : Large Background with CSS3, All About Backgrounds

The background of a website can make such a difference to the way a site feels and looks, the purpose of this tutorial to get you up and running with the various techniques and practices and showcase the different ways to create great backgrounds and give your website a little pep and zing. For this, we’re going to be using Chocolat to write the CSS code along with Fireworks to actually create some simple graphics that look great as backgrounds but you can use pretty much any text and graphic editor and, of course, we’ll be using a web browser – Safari in this case.

Setting Up

Firstly we’ll set up our HTML and CSS document, to do this open Chocolat (or your text editor of choice) and create a two new documents, save one index.html and the other main.css and save them both in an appropriate location that you can get to easily. To start off with, set up a basic HTML document and link it to a stylesheet called main.css

Now, open up main.css and add the following:

html {

padding: 0;
margin: 0;
}

body {

}

Although, a background color really isn’t the most impressive type of background, a really light shade of grey can actually add a lot of depth to your design, it really does depend on the nature of the website.

Background Image

Next, we’ll explore the background image and what we’ll do is use a .JPG image as our background. When using just one background image, you really should make sure the image is of high quality and that it won’t go blurry when the browser window is stretched.

The first method we can use to apply an image is by simply making the image the background and keep it stuck to the top left of the browser window, to do this, replace body with the following:

body {
background-image: url('image.jpg');
}
Obviously replacing “image.jpg” with the name and location of your image relative to the CSS file. Now if we preview that, it looks good but what happens when the image is smaller or the browser window is big, what happens then?

Well, the image simply stops and is repeated by default but this isn’t really the effect we want, mainly because it doesn’t look good at all…

The best way I have found to apply an image as the background is by using the following:


body {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


This way, the image is always in the centre of the window and regardless of the size of the image, it’ll just stretch anyway.

Repeating Background Image

Sometimes it’s useful to repeat an image, this not only can create a great effect but it can also save on the loading time of the website, for example if you had a small image – you can repeat that image to span the whole page as opposed to just creating on large image.

For this section, I will be using this pattern from Subtle Patterns – Download and I’ve adding the following:

body {
background: url(repeat-image.png) repeat;
}
Here, we’re just repeating the image all over our webpage meaning that we don’t have to download a large image, this is good obviously as it reduces loading times.

body {
background: url(top-repeat-image.jpg) repeat-x;
}

body {
background: url(side-repeat-image.png) repeat-y;
}

body {
background: url(top-repeat-image-yellow.jpg) repeat-x;
background-color: #F9E532;
}

Contained Background Image

It can also be handy to apply a background to a div – to do this, I’m going to simply create container and apply a solid color background to do it, this also means that you’re able to apply any of the techniques presented here.

First, we’ll create the div within main.css by adding the following just below the second { of body:

container {
width: 800px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
background-color: rgba(41, 43, 153, 0.480);
}

and now we’ll head to the HTML file with just under , we’ll create the div:

Now, if we open up our web browser, you can see that not only have we created a container but we’ve also make it transparent! How did we do that? Well, when specifying the background color:

background-color: rgba(41, 43, 153, 0.480);

You should not that it’s now rbga and not rgb and that there’s an additional value on the end, that’s the opacity!

Multiple Background Images

Our final interesting way to apply a background is not by applying one background but by applying two backgrounds! This is simple to do, I’ve got a gradient


body {
background-image: url(gradient.png), url(pattern.png);
background-repeat: repeat-y, repeat; }