All About Backgrounds in CSS3

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

html page

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

html {
padding: 0;
margin: 0;
}

body {

}

Solid Colors

The first and most simple way to approach backgrounds in CSS is to apply just a simple solid color, to do this we’ll open main.css and within the body { tag, add the following:

body {
background-color: black;
}

and now if we were to open up our index.html in our web browser, and sure enough, the background color has changed to a solid black. Although, simply specifying the name of the color that we want to use really isn’t sufficient because we might want a specific color, to choose a specific color, there’s a number of options:

You can add the hex value for your color:
background-color: #247999;

You can use the RGB value:
background-color: rgb(153, 68, 63);

You can specify the HSL value:
background-color: hsl(239, 58%, 38%);

solid

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…

bad image

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.

good imae

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.

repeat

What if though you just wanted to repeat the image along the top, to do this I’ve used this gradient image – http://www.caletaparaisoowners.info/BlueToWhiteGradient.jpg

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

top

and to repeat along the side, I’ve used http://qbi-lab.org/images/background-gradient-overlay.png and the following code:

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

side

What’s more, you can also change the ending color, for example if your gradient was from blue to light blue (http://www.pptbackground.net/plog-content/images/powerpoint/transportation-backgrounds/yellow-gradient-ppt-templates.jpg), you could simply use the following code:

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

color and image

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!

container

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 (http://www.monitortests.com/gradient.png) and a pattern (http://subtlepatterns.com/patterns/noise_lines.zip) to apply.

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

multiple

There we have it, that’s how to make the most of backgrounds in CSS and how to apply some advanced and basic techniques to spice up your website!

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote