Tutorials‎ > ‎HTML Example Programs‎ > ‎

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>