Enhancing Web Pages Basic HTML with CSS

🎯 Overview

👉 Getting Started with HTML 

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