CoderZone.org
CoderZone Sandbox: CSS Backgrounds
CSS allows complete control over the background properties HTML elements. Backgrounds may be assigned a color and/or an image. If an image is used, you may control its position, whether or not the images repeats horizontally and/or vertically, and whether or not the image is fixed in place or scrolls with the browser window.

CSS background properties include:

  • Background-color
  • Background-Image
  • Background-Position
  • Background-Repeat
  • Background-Attachment

Background-color
You may assign the background any valid CSS color name, hex color, or RGB color. (For a complete list of valid CSS color names, please see the CSS Color Names chart.) If this property is not set it will be inherited from the containing element.


Background-Image
Any HTML element with a background property can be assigned an image as a background. Images can be .GIFs, .JPGs, .PNGs, .BMPs, or any other image format supported by the browser. A background may be loaded locally from the server or remotely via a URL. If this property is not set it will be inherited from the containing element.


Background-Image
This property applies only to background images, and determines the placement of the image within the CSS container. The default position is the upper-left corner of the container or browser window. The offset position may be set with any valid CSS unit of measurement.


Background-Image
This property also applies only to background images. It determines whether or not the image will be repeated vertically and/or horizontally within the containing element. If the image is the same size or larger than the containing element, setting this property will have no practical effect unless the container size changes to a size larger than the background image dimensions.


Background-Image
Similar to position and repeat, this property also applies only to background images. The attachment property controls whether or not the background image is fixed in place (statically positioned) or allowed to scroll with the window. If this property is not set it will be inherited from the containing element.
Edit code in the area below, then click the "Test It" button:
Result of your code:
  ?  Back to Sandbox 
© coderzone.org | users online: 9