You can change the color of the background using CSS, or use a background image. Background colors and background images can be applied to the entire page or to individual elements by using the background-color property.
The background color of an HTML element is changed with the background-color CSS property. The background color uses the same syntax (hex code) as font colors. For example,
With this CSS, the background color of the page would be yellow.
Background images are a good way to create a nice looking HTML page. Using a background image, you can create a gradient effect, where one part of the page is a solid color and the color fades out or gets lighter as it stretches to the other side.
Background images appear behind other elements. This means that you can overlay all your HTML, including other images, on top of a background image.
Background images are added with the background-image CSS property. For example,
Beyond the ability to set an image as the background of an element, CSS includes several properties that offer you great flexibility in the exact placement of the image:
Repeat: Sets whether the image tiles appear only once or repeat only horizontally or vertically.
Attachment: Sets whether the image scrolls with the rest of the page or stays in one place.
Position: Moves the image to the left and down (positive values) or to the right and up (negative values) from the top-left corner of the parent element. The first number tells the browser the distance the element should appear from the left edge of its parent; the second value specifies the position from the top edge of the parent.
Size: Sets the width and height of the image within the element’s background as an absolute length, percentage, or the keywords - cover, contain, or auto (which maintains the aspect ration).
Clip: Sets whether the background fits to the border or just within the content area.
Origin: Sets the position of the background relative to the border, padding, or content. This is especially useful for setting the background of inline elements that might break across multiple lines.
Multiple background images: Although not a specific property, CSS now allows you to layer multiple background images using a comma-separated list.
The background shorthand property allows you to define the background image and color for an entire page or individual element, rolling many of the backgrou nd properties into a single quick and compressed declaration.
background: rgb(85,85,85) url(../images/bg-image.jpg) repeat fixed 0 0; }
Type a value for the background color, followed by a space. Next, specify the URL for the background image. Type url() and in the parenthesis, add an absolute or relative path to the background image, followed by a space. Alternatively, you could type none instead of a URL, which would instruct the browser not to use a background image.
If you included a background image, specify how it should tile. Type a value for the way you want your background to repeat, followed by a space. The, specify how it should scroll. Then, specify how it should be positioned.