Scribd
Upload
32 views

Property Values: 1. Styling Backgrounds

This document discusses CSS properties for styling backgrounds. It covers the background-color, background-image, background-repeat, and background-attachment properties. Background-color sets the background color, background-image inserts an image, background-repeat controls image repetition, and background-attachment controls whether the image is fixed or scrolls. Examples are provided for setting background colors and images and controlling image repetition and attachment.

Uploaded by

sanskruti_patel_mca
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
32 views

Property Values: 1. Styling Backgrounds

This document discusses CSS properties for styling backgrounds. It covers the background-color, background-image, background-repeat, and background-attachment properties. Background-color sets the background color, background-image inserts an image, background-repeat controls image repetition, and background-attachment controls whether the image is fixed or scrolls. Examples are provided for setting background colors and images and controlling image repetition and attachment.

Uploaded by

sanskruti_patel_mca
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS Styling Properties

Styling Backgrounds
Styling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables

1. Styling Backgrounds

CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

Background Color

The background-color property specifies the background color of an element.

The background color of a page is defined in the body selector:

Example
body {background-color:#b0c4de;}

With CSS, a color is most often specified by:

 a HEX value - like "#ff0000"


 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"

Property Values
Value Description
color Specifies the background color.
transparent Specifies that the background color should be transparent. This is
default
inherit Specifies that the background color should be inherited from the
parent element

Background Image

The background-image property specifies an image to use as the background of an


element. By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:

Example
body {background-image:url('paper.gif');}

The background of an element is the total size of the element, including padding and
border (but not the margin). By default, a background-image is placed at the top-left
corner of an element, and repeated both vertically and horizontally.

Property Values
Value Description
url('URL' The URL to the image
)
none No background image will be displayed. This is default
inherit Specifies that the background image should be inherited from the parent
element

Background-repeat

The background-repeat property sets if/how a background image will be repeated. By


default, a ba ckground-image is repeated both vertically and horizontally.

Property Values
Value Description
repeat The background image will be repeated both vertically and
horizontally. This is default
repeat-x The background image will be repeated only horizontally
repeat-y The background image will be repeated only vertically
no-repeat The background-image will not be repeated
inherit Specifies that the setting of the background-repeat property should be
inherited from the parent element
Example

Repeat a background-image only vertically:

body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
Background-attachment
The background-attachment property sets whether a background image is fixed or scrolls
with the rest of the page.

Property Values
Value Description
scroll The background image scrolls with the rest of the page. This is default
fixed The background image is fixed
inherit Specifies that the setting of the background-attachment property should be
inherited from the parent element
Example

How to specify a fixed background-image:

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

You might also like