CSS BACKGROUNDS PAGE 5

CSS BACKGROUNDS

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>