Saturday, February 2, 2013

How to position a background image


<!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>

How to repeat a background image only horizontally


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

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

</html>

Bad background image

<!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>


Set an image as the background of a page


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

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

</html>

et the background color of different elements


<!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>

Set the background color of a page


<!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>