Enhancing Web Pages Basic HTML with CSS

👉 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

This is header 1

This is header 2

This is a paragraph

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

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

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

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

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

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

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

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

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

The image will not scroll with the rest of the page

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

This is some text

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.

More HTML Articles

• Getting Started with HTML 

• Enhancing Web Pages Basic HTML with CSS 

• Exploring Simple HTML Programs for Images and Image Alignment 

• Exploring Basic HTML Elements: Headings, Horizontal Lines, Paragraphs