You already learned how to set a colour as a background and how to use a small image to create a textured background but you have probably seen sites with images or video as a background.

Copy this image and save it in your media folder inside intermediatesite.

Open linksinternal.html and save it as background.html.  Add this to the style element:

body {

Try it.  Resize your browser window and if possible try it on different devices.  This should illustrate the first two problems with using background images.

Problem 1 - size

Any background image you choose will need to fit all sorts of window sizes.  This image is big enough to fill almost any monitor.  Unfortunately that means most people will see only part of it.  Use your browser's zoom facility to zoom out from the page until you can see the whole image (25%?).  Note that you can probably now see another copy of the image starting where the first ends.  So if your image is too small the browser will tile (repeat) it so it covers the whole page.  This worked with the texture you used in the Beginner tutorial (backgrounds.html) because it was created to tile without edges.  This image does not look great tiled.

Solutions to problem 1

Add this to the body rule set:


This rule makes the image bigger or smaller to cover the whole background of the page.  It scales it up to fit the biggest dimension whatever that is.  Depending on your monitor that may mean that the image fits vertically or horizontally but it is unlikely to fit both exactly.  Zoom in and change the window size to see the full effect.

If your image is not large enough to cover the whole page at it's actual size and the browser makes it bigger the user will start to see pixelation which could ruin the whole effect you wanted.

Change the background-size rule to this:


Now the image fits the smallest dimension and can be tiled to fill the other.

Both of these solutions involve a less than perfect background on all monitors but are better than just leaving the image a set size.  There is a clever solution which gives good coverage and perfect quality.  You put a background colour on the page and blend the edges of the image to that colour so no end of the image is visible.  The image still does not fill every screen but it doesn't look bad to the user.  As this site does not cover graphics you will need to work on that one!

Problem 2 - colour

You should have noticed also that the text on the page is now hard to read in many places.  You can change the colour to suit the image but it is hard to have a colour which is visible over the full image. 

Solutions to problem 2

You could give the text a background colour.  Add this rule set:

h1, h2, p {

Unfortunately that will normally look very ugly and obscures the image.  You could have a semi-transparent background so try that by changing the colour to this:


Better but still not great.  You could cover the whole page with a div with that colour by adding one to the HTML:

<div id="opaque">

Delete the h1, h2, p rule set and replace it with this:

#opaque {

This avoids the banding but still reduces the effectiveness of the image as a background.

The other possible solution is to give text shadows which look like the characters have an outline.  This is very unlikely to look good on small text but on larger headings it might look acceptable.  Add a new rule set:

h1 {
    text-shadow: 1px 1px rgba(255,0,0,0.8), -1px -1px rgba(255,0,0,0.8), -1px 1px rgba(255,0,0,0.8), 1px -1px rgba(255,0,0,0.8);

This sets up four text shadows one below and to the right, one below and to the left and so on.  With shadows all around it looks as if the text is outlined.  However zoom in and you will see the problem (at least with serif fonts).  You could use an embedded font which is actually outlined but there are not many.

Perhaps the only solution which really works is to choose an image which is quite simple and only has a small range of colours in it.  Then the text can be a contrasting colour.

Problem 3 - size again

Although many people now have fast Internet connections some do not.  If you use a large image you are risking some people not seeing your page as you want them to because the image takes so long to download.

Solution to problem 3

Browsers should show the page while the background is still loading so the page will still be there but without your background.  At some point the background will finish downloading and appear which can be a bit of an abrupt thing so soften that appearance by setting a background colour which is a similar tone to the image.  The user will see the colour until the image appears.  This does not get rid of the fact that you are using up the user's download capacity to download an image which may not be important to them.

Problem 4 - scrolling

When you scroll your page the background image moves with the text (try it).  This might be OK but some people find it confusing and others do not like the fact that the image repeats vertically.

Solution to problem 4

Add this line to the styles in the body rule set:


Try scrolling again and it might or might not seem better for you.

Valid uses?

It is probably best not to put an image behind a whole page.  Instead use it just for the main heading block or one area on the page.  Whether you use it for the whole page or a part pick the image very carefully so other elements are still easy to see.  One option is to use an image which has a large blank or neutral area and that is where you put your content.  A photo of a blank cinema screen, a paper notebook or a projection screen can work well.

One other valid use might be combined with the pseudo-element first-letter to decorate the first letter by placing a background under it.