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">
<h2>Hello World</h2>
<p>Here, the background image is set to 300px wide and 100px high.</p>
</div>
<h2>background-size:cover </h2>
<div id="example3">
<h2>Hello World</h2>
<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>
<h1>The background-image Property</h1>
<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>
<h1>The background-image Property</h1>
<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>
<h1>The background-image Property</h1>
<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>
<h1>The background-image Property</h1>
7
<p>Hello World!</p>
</body>
</html>
Output :
Example 2 :
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("pine.png");
background-repeat: no-repeat;
background-position :right bottom;
}
</style>
8
</head>
<body>
<h1>The background-image Property</h1>
<p>Hello World!</p>
</body>
</html>
Output
Example 3 :
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("pine.png");
background-repeat: no-repeat;
background-position :90% 10%;
}
</style>
9
</head>
<body>
<h1>The background-image Property</h1>
<p>Hello World!</p>
</body>
</html>
Output :
Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("pine.png");
background-repeat: no-repeat;
background-position :100px 100px;
10
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<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-image: url("pine.png");
background-repeat: no-repeat;
background-position :right 70%;
background-attachment :scroll;
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<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-image: url("pine.png");
background-repeat: no-repeat;
background-position :right 70%;
background-attachment :fixed;
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<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-image: url("pine.png");
background-repeat: no-repeat;
background-position :right 70%;
background-attachment :local;
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<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-repeat: no-repeat;
background-size: auto;
}
15
#example2 {
border: 2px solid black;
padding: 25px;
background: url(flower.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}
#example3 {
border: 2px solid black;
padding: 25px;
background: url(flower.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</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">
<h2>Hello World</h2>
<p>Here, the background image is set to 300px wide and 100px high.</p>
</div>
<h2>background-size:cover </h2>
<div id="example3">
<h2>Hello World</h2>
<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
