Scribd
Upload
59 views

Css Content Property

The document discusses CSS background properties. It explains that CSS properties define style rules and each property has a value. It then describes various background properties like background-color, background-image, background-position, background-size, background-repeat, and background-attachment. Examples are provided for each property to demonstrate how they can be used to style the background of elements.

Uploaded by

Subhadeep Panda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Css Content Property

The document discusses CSS background properties. It explains that CSS properties define style rules and each property has a value. It then describes various background properties like background-color, background-image, background-position, background-size, background-repeat, and background-attachment. Examples are provided for each property to demonstrate how they can be used to style the background of elements.

Uploaded by

Subhadeep Panda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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

You might also like