Scribd
Upload
60 views

CSS Background Property: Definition and Usage

The CSS background property can set multiple background properties in one declaration, including background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. It allows specifying color, images, positioning, sizing, repetition, origin and clipping of background images. Common values include URLs to specify images, pixels or percentages for positioning, and keywords like "no-repeat" and "fixed" to control repetition and scrolling behavior.

Uploaded by

Aljon S. Templo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
60 views

CSS Background Property: Definition and Usage

The CSS background property can set multiple background properties in one declaration, including background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. It allows specifying color, images, positioning, sizing, repetition, origin and clipping of background images. Common values include URLs to specify images, pixels or percentages for positioning, and keywords like "no-repeat" and "fixed" to control repetition and scrolling behavior.

Uploaded by

Aljon S. Templo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS background Property

Definition and Usage


The background shorthand property sets all the background properties in one declaration.

The properties that can be set, are: background-color, background-image, background-position, background-
size, background-repeat, background-origin, background-clip, and background-attachment.

Property Values
Value Description

background-color Specifies the background color to be used

background-image Specifies ONE or MORE background images to be used

background-position Specifies the position of the background images

background-size Specifies the size of the background images

background-repeat Specifies how to repeat the background images

background-origin Specifies the positioning area of the background images

background-clip Specifies the painting area of the background images


background-attachment Specifies whether the background images are fixed or scrolls
with the rest of the page

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element. Read


about inherit

CSS background-color Property


Example
Set the background-color of different elements:

body {
background-color: yellow;
}

h1 {
background-color: #00ff00;
}

p {
background-color: rgb(255,0,255);
}

CSS Syntax
background-color: color|transparent|initial|inherit;
CSS background-image Property
Example
Set a background-image for the <body> element:

body {
background-image: url("paper.gif");
background-color: #cccccc;
}

CSS background-position Property

Value Description

left top If you only specify one keyword, the other value will be "center"
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

x% y% The first value is the horizontal position and the second value is the
vertical. The top left corner is 0% 0%. The right bottom corner is
100% 100%. If you only specify one value, the other value will be
50%. . Default value is: 0% 0%
xpos ypos The first value is the horizontal position and the second value is the
vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or
any other CSS units. If you only specify one value, the other value will
be 50%. You can mix % and positions

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element. Read about inherit

Example
How to position a background-image:

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

CSS Syntax
background-position: value;

CSS3 background-size Property


Specify the size of a background image:
div {
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}

CSS background-attachment Property


CSS Syntax
background-attachment: scroll|fixed|local|initial|inherit;

Property Values
Value Description

scroll The background scrolls along with the element. This is default

fixed The background is fixed with regard to the viewport

local The background scrolls along with the element's contents

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element. Read about inherit

You might also like