css class-10 background color

Document Sample
css class-10 background color Powered By Docstoc
					<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>

</body>
</html>

2

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
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>

3
<!DOCTYPE html>
<html>
<head>
<style>
body {background-image:url('paper.gif');}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

4
<!DOCTYPE html>
<html>
<head>
<style>
body {background-image:url('bgdesert.jpg');}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
</body>

</html>

5
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

6
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

7
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.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>
8
<!DOCTYPE html>
<html>
<head>

<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from
the text.</p>
<p>In this example we have also added a margin on the right side, so the
background image will never disturb the text.</p>
</body>

</html>9
<style>
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned
away from the text.</p>
<p>In this example we have also added a margin on the right side, so that
the background image will not disturb the text.</p>
</body>

</html>

10

				
DOCUMENT INFO
Shared By:
Categories:
Tags: class-10
Stats:
views:0
posted:1/28/2013
language:
pages:4