CSS background properties are used to define the
background effects.
Types of background effects:
1.The background-color property: It is used to
set the background color of an element.
2.The background-image property: It is used to
set the background image of an element.
3.The background-repeat property: It is used to
control the repetition of an image in the background.
4.The background-position property :It is used to
control the position of an image in the background.
5.The background-attachment property:It is used to
control the scrolling of an image in the background.
6.The background property : It is used as shorthand
to specify a number of other background properties.
Example for background-color:
Example:12
<html>
<head>
<style>
h1 { background-color:#6495ed; }
p { background-color:yellow; }
div { background-color:#b0c4de; }
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div></body></html>
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.
Example:13
<html><head>
<style>
body
{ background-image:url('pyramid.png');
background-repeat:no-repeat; }
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but
it is disturbing the reader!</p>
</body></html>
Background - Shorthand property:
As you can see from the examples above, there are many
properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all
the properties in one single property. This is called a
shorthand property.
The shorthand property for background is simply "background":
Example for background image:
Example14
<html><head>
<style>
body
{ background:#ffffff url('elephant.png') no-repeat right top;
margin-right:200px; }
</style></head>
<body>
<h1>image css!</h1>
<p>Now the background image is only shown once, and it is
also positioned away from the text.</p>
<p> margin on the right side for background image will not
disturb the text.</p>
</body></html>
Example:15
<html><head>
<style>
body
{ background-image:url('bomma.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center; }
</style></head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body></html>
