Cascading Style Sheets/Background

From WikiKnowledge

Contents 1 background-color 2 background-image 3 background-repeat 4 background-position 5 background-attachment 5.1 Fixed 6 background-size 7 Navigation 7.1 Cascading Style Sheets

[edit] background-color

This controls the background color of elements. The background color covers the content, padding and the border of an element, but not the element's margins, which are always transparent.

Its values are:

<color>	Any color value. See Cascading Style Sheets/Colors for more information on colors.
transparent	Make the background transparent.
inherit	Inherit this setting.

On the right is a simple box which has been given a green background color. It has also been given a dotted red border so you can see that the background color goes all the way out to the edge of the border. Of course you won't notice this whit some border styles, such as solid borders. Below are the CSS rules which have been applied to the box:

height: 80px; 
width: 80px; 
border: 10px dotted red; 
background-color: green; 
float: right;

[edit] background-image

• CSS 1
• CSS 3

Elements can be given background images by using the background-image property. Simply set it to the url of the image file you wish to use. For example to set the background of the body element to Example.png you would use this code:

body{
  background-image: url("Example.png");
}

<url>	<none>
The url of the image to use.	Don't use any background image.

It is a good idea to also set a background-color which will be used while the image is being downloaded or is not available. In CSS 1 and 2 you can only set a single background image per element. In CSS 3 however, the background-image property will take a comma separated list of background images to use. For example:

background-image: url("Example-A.png"), url("Example-B.png");

[edit] background-repeat

By default the image will repeat itself to fill up the space available to it. You can use the background-repeat property to control the directions a background image repeats in, or to stop the image repeating altogether. It has the following settings:

repeat	(Default) Repeat the image horizontally and vertically.
repeat-x	Repeat the image horizontally only.
repeat-y	Repeat the image vertically only.
no-repeat	Don't repeat the image.
inherit	Inherit this setting.

For example to repeat an image on the body element horizontally simply use this CSS rule:

body{ background-repeat: repeat-x;}

[edit] background-position

This property allows you to control the position of the image. It takes 2 values, the first controlls the vertical, and the second controls the horizontal. It has the following settings:

Setting 1		Setting 2
percent	Percentage value indicating the top offset.	percent	Percentage value indicating the left offset.
length	Length value indicating the top offset.	length	Length value indicating the left offset.
top	Places the image at the top.	left	Places the image at the left.
center	Centers the image vertically.	center	Centers the image horizontally.
bottom	Places the image at the bottom.	right	Places the image at the right.
inherit	Inherit this setting.

Both values must be of the same type, 2 percentages, 2 lengths or 2 of the keywords; you cannot mix them up.

For example to center an image you can use this CSS rule

background-position: center center;

The default posision is the top left.

[edit] background-attachment

• CSS 1
• CSS 2

This property describes what to do with the image when the page is scrolled. Its settings are

scroll	CSS 1	(Default) The image scrolls with the page.
fixed	CSS 1	The image remains fixed in place as the page scrolls.
local	CSS 3	The image scrolls with the element.
inherit	CSS 2	Inherit the setting.

[edit] Fixed

The image on the right shows the effect of background-attachment: fixed on the red box. You can see that as the page is scrolled the box moves, but the image does not. Instead, as the box moves, you can see a different part of the background image. The box acts as a "window" to the image below.

In Internet Explorer 6 the fixed setting only works when it is applied to the body element. This has been fixed in later versions.

[edit] background-size

IE	Opera	Safari	Firefox	Konqueror
NO	NO	Experimental	NO	Experimental

• CSS 3

This property, new in CSS 3 is used to change the size of the background image.

<length>	A specific size.
<percentage>
auto

[edit] Navigation