CSS Background

Includes background properties in CSS

Uploaded by

NeeharikaPandey

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

9 views

CSS Background

Includes background properties in CSS

Uploaded by

NeeharikaPandey

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

You are on page 1/ 11

CSS Background

How to set backgrounds of various HTML

elements. You can set the following
background properties of an element −
background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)
CSS 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.
<style>
body { background-image: url("");
</style>
Repeat the Background Image

The background-image property repeats an

image both horizontally and vertically.
You can use no-repeat value
for background-repeat property if you
don't want to repeat an image.
<style> body
{ background-image: url(""); background-
repeat: repeat; }
</style>
To repeat an image horizontally
set background-(background-repeat:
repeat-x;)
To repeat an image vertically,
set background-repeat: repeat-y;
CSS background-position

The background-position property is used to

specify the position of the background image.
 how to se the position the background image
in the top-right corner:
background-position: right top;
how to set the background image position 100
pixels away from the left side.
how to set the background image position 100
pixels away from the left side and 200 pixels
down from the top.
CSS Background Attachment

The background-attachment property specifies

whether the background image should scroll or be
fixed (will not scroll with the rest of the page):
Specify that the background image should be
fixed:
body {
background-image: url(“akgec.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Specify that the background image should
scroll with the rest of the page:
Body{
background-attachment: scroll;
}
CSS background - Shorthand property

To shorten the code, it is also possible to

specify all the background properties in one
single property. This is called a shorthand
property.
Instead of writing:

body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Use the shorthand property to set the background
properties in one declaration:
body {
background: #ffffff url("") no-repeat right top;
}
When using the shorthand property the order of
the property values is:
◦ background-color
◦ background-image
◦ background-repeat
◦ background-attachment
◦ background-position
CSS background-clip Property