CSS Background Properties

Group annotations on this page

halbac05 on 2008-11-24

This website talks about all that you could want to know about adding background to your web page. This includes how to position a background image, how to repeat a background image, how to place a background image, and how to set a fixed background image.
vancej on 2008-12-19

This page gives examples of what a css page should look like when you try to put in a background. It has a lot of different scenarios.

This link has been bookmarked by 45 people . It was first bookmarked on 14 Jul 2006, by Deng Jianguo.

11 Aug 09

Madison Guy

- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
28 more annotations...

background
color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-repeat
Background Color
specifies the background color of an element
The background color of a page is defined in the body selector:
The background color can be specified by:
- name - a color name, like "red"
- RGB - an RGB value, like "rgb(255,0,0)"
- Hex - a hex value, like "#ff0000"
Background Image
specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
set like this
Background Image - Repeat Horizontally or Vertically
If the image is repeated only horizontally (repeat-x),
Background Image - Set position and no-repeat
Showing the image only once is specified by the background-repeat property
background-repeat:no-repeat
The position of the image is specified by the background-position property
background-repeat:no-repeat;
background-position:top right
Background - Shorthand property
there are many properties to consider when dealing with backgrounds
it is also possible to specify all the properties in one single property. This
is called a shorthand property
The shorthand property for background is simply "background":
body {background:#ffffff url('img_tree.png') no-repeat top right}
When using the shorthand property the order of the property values are:
All CSS Background Properties

The number in the "CSS" column indicates in which CSS version the property is
defined (CSS1 or CSS2).

Property	Description	Values	CSS
background	Sets all the background properties in one declaration	background-color background-image background-repeat background-attachment background-position inherit	1
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	scroll fixed inherit	1
background-color	Sets the background color of an element	color-rgb color-hex color-name transparent inherit	1
background-image	Sets the background image for an element	url(URL) none inherit	1
background-position	Sets the starting position of a background image	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos inherit	1
background-repeat	Sets if/how a background image will be repeated	repeat repeat-x repeat-y no-repeat inherit	1

24 Jun 09

agus adjo
my Site
24 Apr 09

Bart Lynn
.NET Version 2
05 Feb 09

Michele Gasser
color design hex html Reference webdesign
13 Jan 09

Laura Jacob
css properties webdesign plurk
19 Dec 08

Joan Vance
This page gives examples of what a css page should look like when you try to put in a background. It has a lot of different scenarios.

css backgroud image
24 Nov 08

Jacquelyn Halbach
This website talks about all that you could want to know about adding background to your web page. This includes how to position a background image, how to repeat a background image, how to place a background image, and how to set a fixed background image.

css webdesign properties backgrounds
Brittany Mitros
css properties webdesign plurk ideas tutorials
07 Nov 08

Karin Beil
css webdesign plurk
30 Aug 08

Sharon Elin
css webdesign
06 Aug 08

Nedra Isenberg
css properties howto plurk
13 Apr 08

João Leitão
css webdesign tutorial html howto background tutorials web
10 Mar 08

Doug Y'barbo
HTML & CSS
06 Feb 08

Betzi Bateman
CSS
18 Oct 07

Kris Baldwin
html webdesign
18 Jun 07

Kathryn Martyn Smith M.NLP
css
27 Mar 07

Luke Lee
imported magnolia web_design
14 Jul 06

Deng Jianguo
css
12 May 06

Jason Wysong
MySpace
05 Mar 05

surindra singh
ancestory AT j search webspace building css Imported Bookmarks
30 Jun 04

drakeg1
Mail Firefox Miscellaneous Imported Bookmarks