Css Content Property

Cascading Style Sheets(CSS)
CSS Properties
CSS property is individual piece in style rule definition. Each property
defined along with its value.
Style rule definition :
Selector
{
Property1 : value;
Property2 : value;
Property3 : value;
…..
}
Background :CSS has different type of background properties to change the

effect of page background.
• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-attachment
Above properties are used to change display of page background.
Properties : Background - color
background-color : Set the background color for a page
Example :
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background-color : cyan;
1
}
#example2 {
background-color : red;
}
#example3 {
background-color : rgb(201, 76, 76);
}
</style>
</head>
<body>
<h2>background-size: auto (default):</h2>

<div id="example1">
<h2>Hello World</h2>
<p>The background image is displayed in its original size.</p>
</div>
<h2>background-size: 300px 100px:</h2>

<div id="example2">
<p>Here, the background image is set to 300px wide and 100px high.</p>
</div>
<h2>background-size:cover </h2>
<div id="example3">
<p>Here, the background image is set to cover</p>
</div>
<p><strong>Note:</strong> The background-size property is not supported in

Internet Explorer 8 and earlier versions.</p>
</body>
</html>
2
Properties : Background - image
Background – image : Set a background-image for the page body.

Example1 :
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("flower.jpg");
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<p>Hello World!</p>
</body>
</html>
Output :
3
In above example selector of style rule is tag selector i.e. body. Style rule defined by
background-image property. This style display flower.jpg image as background of
page. Above style sheet is also example of internal style sheet. By default nature of
background image is repeat.
Properties : Background - Repeat
Background-image can repeats an image both horizontally(x) and vertically(y) also.

By default it repeats horizontally.
Syntax :
body {
background-image: url("image file name");
background-repeat: repeat-x;
or
background-repeat: repeat-y;
or
background-repeat: no repeat;
}
Example1 :
<!DOCTYPE html>
<html>
<head>
4
<style>
body
{ background-image: url("flower.jpg");
background-repeat: repeat-x; }
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Output :
Example2:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("flower.jpg");
background-repeat : repeat-y;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
5
</html>
Output :
In above example the ‘ background-repeat : repeat-y’ property repeats vertically.
Example3:
<!DOCTYPE html>
<html>
<head>
<style>
body
{ background-image: url("pine.png");
background-repeat : no-repeat; }
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
6
Output :
Properties : Background - Position
The background-position property sets the starting position of a background image.
Syntax :
background-position: Horizontalvalue Vertical value;
Horizontal value may be left/ right/center/%/ px
Vertical value may be left/ right/center/%/ px
Example 1 :
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("pine.png");
background-repeat: no-repeat;
background-position :left top;
}
</style>
</head>
<body>
7
<p>Hello World!</p>
</body>
</html>
Output :
Example 2 :
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-position :right bottom;
}
</style>
8
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Output
Example 3 :
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-position :90% 10%;
}
</style>
9
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Output :
Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-position :100px 100px;
10
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Output :
11
CSS background-attachment Property
The background-attachment property sets whether a background image scrolls with the
rest of the page or it is fixed.
background-attachment: scroll|fixed|local|initial|inherit
Scroll : This is default value. In this case the background image will scroll with the
page.
Fixed : The background image will not scroll with the page.
Local : The background image will scroll with the element's contents
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-position :right 70%;
background-attachment :scroll;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
12
Following output shows the image scroll to upwards.
Output :
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-attachment :fixed;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
In following output shows background image fixed in page where it is belong.
13
Local :When value of background-attachment property is local then the background
image will scroll with the element's contents.
Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-attachment :local;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
In following output shows background image scroll in body element.
14
CSS background-size Property
The background-size property specifies the size of the background images. Value of
this property specify by auto, cover and pixel value.
Auto : Display image in original size at background.
Cover : Image covers the whole background of element.
Pixel : Size of background depends on pixel value.
Example 1 :
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 2px solid black;
padding: 25px;
background: url(flower.jpg);
background-size: auto;
}
15
#example2 {
padding: 25px;
background-size: 300px 100px;
}
#example3 {
padding: 25px;
background-size: cover;
}
</style>
</head>
<body>
<h2>background-size: auto (default):</h2>

<div id="example1">
<p>The background image is displayed in its original size.</p>
</div>
<h2>background-size: 300px 100px:</h2>

<div id="example2">
<p>Here, the background image is set to 300px wide and 100px high.</p>
</div>
<h2>background-size:cover </h2>
<div id="example3">
<p>Here, the background image is set to cover</p>
</div>
16
<p><strong>Note:</strong> The background-size property is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
Output :
Above output shows difference of three types of values in background-size property.
17

Css Content Property

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Content Property

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets(CSS)

Style rule definition :

Background :CSS has different type of background properties to change the

Above properties are used to change display of page background.

Properties : Background - color

background-color : Set the background color for a page

<h2>background-size: auto (default):</h2>

<h2>background-size: 300px 100px:</h2>

<p><strong>Note:</strong> The background-size property is not supported in

Background – image : Set a background-image for the page body.

Properties : Background - Repeat

Background-image can repeats an image both horizontally(x) and vertically(y) also.

In above example the ‘ background-repeat : repeat-y’ property repeats vertically.

Properties : Background - Position

The background-position property sets the starting position of a background image.

background-position: Horizontalvalue Vertical value;

Horizontal value may be left/ right/center/%/ px

Vertical value may be left/ right/center/%/ px

Auto : Display image in original size at background.

Cover : Image covers the whole background of element.

Pixel : Size of background depends on pixel value.

<h2>background-size: auto (default):</h2>

<h2>background-size: 300px 100px:</h2>

Above output shows difference of three types of values in background-size property.

You might also like