backgrounds


As you saw in the last chapter, CSS treats each element as if it were its own box. You can control the background of these boxes using the following properties (when used on the <body> element they affect the entire browser window).


name Description
background - color Specifies a background color
background - image Specifies an image to use as the background
background - repeat Indicates whether the background image should be repeated
background - attachment Indicates a background image should be fixed in one position on the page, and whether it should stay in that position when the user scrolls down the page
background - position Indicates where an image should be positioned
background A shorthand form that allows you to specify all of these properties

The background - color Property


The background - color property allows you to specify a single solid color for the background of any element.


When the background - color property is set for the <body> element, it affects the whole document, and when it is used on any other element it will use the specified color inside the border of the box created for that element.


The value of this property can be a color name, a hex code, or an RGB value.


	      	body {background-color:#cccccc; color:#000000;}
			b {background-color:#FF0000; color:#FFFFFF;}
			p {background-color: rgb(255,255,255);}
	      

The background - image Property


As its name suggests, the background - image property enables you to add an image to the background of any box in CSS. This can be very useful in many situations, from adding a subtle texture or shading to adding a distinctive design to the back of elements or entire pages.


The value for this property should start with the letters url


body {background-image: url(“images/background.jpg");}

If both a background - image property and the background - color property are used, then the background - image property takes precedence. It is good practice to supply a background - color property with a background image and give it a value similar to the main color in the background image because the page will use this color while the background image is loading or if it cannot display the image for any reason.


	      	body {
			background-image: url(“images/background.jpg");
			background-color: #cccccc;}
	      

  • There is no way to express the intended width and height of a background image, so you need to save it at the size you want it to appear.
  • There is no equivalent to the alt attribute (alternate text for those not able to see the image for any reason); therefore, a background image should not be used to convey any important information that is not described on the page in text as well.
  • Background images are often shown on the page after other items have been rendered, so it can look as if they take a long time to load.
  • The background - image property works well with most block - level elements, although some older browsers can have problems showing background images in tables.

The background - repeat Property


When you specify a background - image , and the box is bigger than the image, then the image is repeated to fill up the whole box, creating what is affectionately known as wallpaper .


If you do not want your image to repeat all over the background of the box, you should use the background - repeat property.


name Description
repeat This causes the image to repeat to cover the whole page (it is the default therefore rarely used).
repeat - x The image will be repeated horizontally across the page (not down the whole page vertically).
repeat - y The image will be repeated vertically down the page (not across horizontally).
no - repeat The image is displayed only once.

These different properties can have interesting effects. It is worth looking at each in turn. You have already seen the effect of the repeat value (as this is the default behavior when the property is not used. The value repeat - x creates a horizontal bar following the browser ’ s x - axis


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

The repeat - y value works just like repeat - x but in the other direction, vertically following the browser ’ s y - axis


		   	body {
			background-image: url("background.jpg");
			background-repeat: repeat-y; }
		   

The final value was no - repeat , leaving one instance of the image that by default will be in the top - left corner of the browser window


		   	body {
			background-image: url("background.jpg");
			background-repeat: no-repeat; }
		   

The background - position Property


name Description
x% y% Percentages along the x (horizontal) and y (vertical) axis
x y Absolute lengths along the x (horizontal) and y (vertical) axis in pixels
left Shown to the left of the page or containing element
center Shown to the center of the page or containing element
right Shown to the right of the page or containing element
top Shown at the top of the page or containing element
center Shown at the center of the page or containing element
bottom Shown at the bottom of the page or containing element

		   	body {
			background-image:"background.jpg";
			background-position: 50% 20%;
			background-repeat: no-repeat;
			background-color: #eaeaea; }
		   

The background - attachment Property


When you specify a background image you can use the background - attachment property to specify whether the image is fixed in its position, or whether it moves as the user scrolls up and down the page.


name Description
fixed The image will not move if the user scrolls up and down the page.
scroll The image stays in the same place on the background of the page. If the user scrolls up or down the page, the image moves, too.

		  	body {
			background-image: url("background.jpg");
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-color: #eaeaea; }
		  

The background Property


The background property allows you to specify several of the background properties at once. The values can be given in any order, and if you do not supply one of the values, the default value will be used.


  • background - color
  • background - image
  • background - repeat
  • background - attachment
  • background - position