Images can be added to a web page to provide a static background image, a transition between sections of a page or a texture.
The expectations regards the references for the inclusion of background images has changed in preference to the use of a separate CSS file. However, the older method is still supported. It is recommended to make such inclusions via CSS in the appropriate files.
Shown below is the classic inclusion of an image as a background to the body tag. Similarly backgrounds may also be assigned to other HTML tags, such as tables and divs
<body background=”/images/bgrnd.jpg”>
In the above example a background image, bgrnd.jpg, is added to the web page’s HTML body tag using the background parameter. The image is located in the images folder at the root of the website.
As shown the background image will repeat, tiled, to fill the web page’s background body. Best use of this is made when adding a texture with a repeat such as seen in materials: wood; metal and fabric.
Image references can be:
- Relative – only the name of the image is used. The browser references the image relative to the current directory.
- Absolute – starting the image reference using a slash will take the reference from the root of the website.
- Full – if a full reference is used then the image can be sourced from another website. It is best to seek the website owner’s permission before implementing this. You will be consuming some of their paid bandwidth.
If in doubt it is better to absolutely reference the image, ensuring that the correct version of the image is used and found. This ensures that image references don’t suffer from page reorganisations, breaking their references. and better for understanding in the future should shuffling the directory structure in the future breaks the reference.
For example if viewing the home page “bgrnd.jpg” is expected to be in the root of the website. “images/bgrnd.jpg” will be in the images folder from the root of the site.
However, if the html file being viewed is in the directory /services then the image will not be referenced, the browser will be looking for the image /services/image/bgrnd.jpg.
Using an explicit definition also allows for reuse, enacting a copy and paste to other pages without worrying whether the image may be wrongly referenced.
Using the repeat and position modifiers background images can be used to effect, providing a border between areas of the web page. Using an image allows for non-linear graphic transitions.
An example is the transition from the page header to the page content. An image is created which is just wide enough for the horizontal repeat. Vertically the image is a little taller than the space defined for it.
As an example a jagged edge to a graphic can be used to create an old paper styled area.
This is the basis for a method used to create a border around a content area.
In the past I have used the edges and corners of a table to create and old document edge with a repeat for the centre area where the content will be added.
<table>
<!-- top row with fixed width corners and variable width middle -->
<tr>
<td background="top-left.jpg" width="10px" height="10px" style=""> </td>
<td background="top-middle.jpg" width="100%" height="10px" style=""> </td>
<td background="top-right.jpg" width="10px" height="10px" style=""> </td>
</tr>
<!-- centre row with fixed width edge having variable height -->
<tr>
<td background="centre-left.jpg" width="10px" height="100%" style=""> </td>
<td background="content.jpg" width="100%" height="100%" style="">
<p>content here</p>
</td>
<td background="centre-right.jpg" width="10px" height="100%" style=""> </td>
</tr>
<!-- bottom row with fixed width corners and variable width middle -->
<tr>
<td background="bottom-left.jpg" width="10px" height="10px" style=""> </td>
<td background="bottom-middle.jpg" width="100%" height="10px" style=""> </td>
<td background="bottom-right.jpg" width="10px" height="10px" style=""> </td>
</tr>
</table>
HTML5 & CSS3
The newer standards dictate that inclusions, such as background images should be referenced within the associated CSS files not directly within the HTML code.
This is so much easier. Define a class with the appropriate image reference and add it to the requisite pages.
The CSS file will be cached and can be minified to reduce the time taken to download it.
Using the CSS file option allows for different sized images according to the device – adapting to a responsive website.
Traditionally a background image could be scaled to fit the background using horizontal and vertical 100% sizing. The alternative CSS sizing of cover and contain will proportionately size and image without distortion.
Some thoughts
Large images can take time to download, making the site “heavy”.
If you are testing your website using a fast broadband connection, consider how the site will look for those with a slower connection. Or how it will be with a mobile device on a phone network.
Some of the HTML tags have a background parameter, we shall be considering this parameter within the <table> tag and how we can add a background image.
Finally by adding to the style definition for the table we shall refine our use of a background image.
The simplest use of a background image is to provide a texture. In this instance we take a small image of, say 20 pixels square. It is repeated both horizontally and vertically to create the effect we desire. Below we have the opening definition for a table with the background parameter defined.
In our example we are setting the background to be the image bgnd.png. For clarity other table parameters have not been included.
<table background=”bgnd.png”>
In the example given our aim was to add a texture to the background of the table. Our next step is to consider a background image which should only be repeated in one direction.
An example of this would be an image which begins solid and then fades out, or perhaps reminiscent of an old document. This can be used to define the edge .
Clearly it would be inappropriate for this to be repeated on the web page 700 pixels further to the right.
The examples below are for an image to repeat down the left, left.png, and across the top, topbar.gif, of the page respectively.
<table style=”background-repeat: repeat-y” background=”leftbar.gif”>
<table style=”background-repeat: repeat-x” background=”topbar.gif”>
Now consider the large slightly faded image of the company logo which needs to be placed near the centre of the table. In this example it is not appropriate to have it repeating. Our table definition therefore becomes:
<table style=”background-repeat: no-repeat” background=”logo.gif”>
Finally, in the examples given we have used a large image which is padded with white space, for example, to move the image to the correct position.
If we consider a logo which we wish to position in the middle of the screen this may be a left and top margin of, say, 200 pixels. This part of the image is not providing any information and will make the image wasteful of bandwidth, with a more perceptible download and rendering delay.
To overcome this we can use a smaller image which we will move to the right and down to the position we require.
<table style=”background-position: 50% 35px; background-repeat: repeat-x” background=”logo.gif”>
