Enhancing Web Pages Basic HTML with CSS
🎯 Overview
In this article, we will explore various HTML programs with CSS to enhance the appearance of web pages. Each program focuses on different aspects of setting and customizing background images using CSS properties. We will provide explanations and code examples for each program to help you understand and apply these techniques in your own projects.
🎯 Set the Background Color in HTML
HTML Source code
<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>
Explanation:
This program demonstrates how to set different background colors for the body, headers (h1 and h2), and paragraphs (p) using CSS. The background-color property is used to specify the desired color.
🎯 Set an Image as the Background in HTML
HTML Example Program
<html>
<head>
<style type="text/css">
body {
background-image: url('bgdesert.jpg');
}
</style>
</head>
<body>
</body>
</html>
Explanation
This program shows how to set an image as the background using the background-image property. Here, we use the image file bgdesert.jpg. You can replace it with your desired image file.
🎯 Repeat a Background Image in HTML
HTML Example Program
<html>
<head>
<style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
Explanation
This program demonstrates how to repeat a background image both horizontally and vertically using the background-repeat property set to repeat. The image will be tiled to fill the entire background.
🎯 Repeat a Background Image Only Vertically
HTML Example Program
<html>
<head>
<style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>
Explanation
This program illustrates how to repeat a background image only vertically using the background-repeat property set to repeat-y. The image will be repeated vertically to cover the background.
🎯 Repeat a Background Image Only Horizontally
HTML Example Program
<html>
<head>
<style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
Explanation
This program showcases how to repeat a background image only horizontally using the background-repeat property set to repeat-x. The image will be repeated horizontally to cover the background.
🎯 Display a Background Image Only Once
HTML Example Program
<html>
<head>
<style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
Explanation
This program demonstrates how to display a background image only once using the background-repeat property set to no-repeat. The image will be shown only once on the background.
🎯 Place the Background Image
HTML Example Program
<html>
<head>
<style type="text/css">
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
</body>
</html>
Explanation
This program shows how to position a background image using the background-position property. The center value centers the image on the background.
🎯 Position a Background Image using %
HTML Example Program
<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>
Explanation
This program demonstrates how to position a background image using percentages. The background-position property allows you to specify the horizontal and vertical positions of the image relative to the background.
🎯 Position a Background Image using Pixels
HTML Example Program
<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>
Explanation
This program showcases how to position a background image using pixels. The background-position property allows you to specify the exact horizontal and vertical positions of the image in pixels.
🎯 Use a Fixed Background Image
HTML Example Program
<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>
<!-- Additional content -->
</body>
</html>
Explanation
This program demonstrates how to set a fixed background image that remains stationary while the rest of the page scrolls. The background-attachment property set to fixed achieves this effect.
🎯 All Background Properties in One Declaration
HTML Example Program
<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>
<!-- Additional content -->
</body>
</html>
Explanation
This program combines all background properties into a single declaration using the background shorthand property. It sets the background color, image, repeat behavior, attachment, and position in one line.
🎯 Summary
Setting background colors can be done using the background-color property.
Background images can be added using the background-image property.
The background-repeat property controls how the image repeats on the background.
Background images can be positioned using percentages or pixels with the background-position property.
The background-attachment property can be used to set a fixed background image.
Multiple background properties can be combined using the background shorthand property.
By using these techniques, you can create visually appealing web pages with customized background designs.