Element Backgrounds with CSS

CIW Course in a Nutshell

Setting and Positioning Backgrounds

CSS permits greater control of background images on your Web page. It also has the advantage that you can change this image without editing individual HTML pages.

This division element should have a nice image of Fiji centred both horizontally and vertically.

I have deliberately left a few blank lines to hopefully display the image more clearly.

The page is not pretty, it is intended to demonstrate the functionality of background-image rather than my artistic flair, or lack of it.

This line of text is here, purely to prove that the image is indeed a background image.

After a great deal of trial and error, I have manage to get the page to render correctly in Internet Explorer, Netscape, Opera, and Firefox.

I have used the following code in the CSS file in order to try and achieve this:

background-image:
	url('nutshell ciw course/fiji.jpg');
background-repeat:
	no-repeat;
background-position:
	center

The documentation I have suggests that background-position will accept 2 values, the first being the x coordinate and the second being the y coordinate. However, specifying a single center works, but center, center or 2 numeric values does not. Also, the single quotes around the filename are essential. Netscape, Opera and Firefox will display nothing without them.

This property will only work in Netscape if it is applied to the BODY element.