2. Basic HTML Programs With CSS

1.Set the background color

 

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>

</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

 

2.Set an image as the background 

<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg')
}
</style>

</head>
<body>
</body>
</html>

 

3.How to repeat a background image

<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat
}
</style>


</head>
<body>
</body>
</html>

 

4.How to repeat a background image only vertically

<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-y
}
</style>

</head>
<body>
</body>
</html>

 

5.How to repeat a background image only horizontally

<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-x
}
</style>

</head>
<body>
</body>
</html>

 

6.How to display a background image only one time

<html>
<head>
<style type="text/css">
body
{
background-image: url('bgdesert.jpg');
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>

 

7.How to place the background image

<html>
<head>
<style type="text/css">
body
{
background-image:
url('smiley.gif');
background-repeat:
no-repeat;
background-position:
center;
}
</style>

</head>
<body>
</body>
</html>

8.How to position a background image using %


<html>
<head>
<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 30% 20%;
}
</style>

</head>
<body>
</body>
</html>

9.How to position a background image using pixels

<html>
<head>
<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>

</head>
<body>
</body>
</html>

10.A fixed background image (this image will not scroll with the rest of the page)

<html>
<head>
<style type="text/css">
body
{
background-image:
url('smiley.gif');
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>

</head>
<body>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
</body>
</html>

11.All the background properties in one declaration

<html>
<head>
<style type="text/css">
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
</head>
<body>

<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>
</html>