19. HTML Backgrounds ~ KAS4UAll

By default, your webpage background is white in color. You may not like it, but no worries. HTML provides you following two good ways to decorate your webpage background.

Html Background with Colors
Html Background with Images

Now let's see both the approaches one by one using appropriate examples.

Html Background with Colors

The bgcolor attribute is used to control the background of an HTML element, specifically page body and table backgrounds. Following is the syntax to use bgcolor attribute with any HTML tag.

This color_value can be given in any of the following formats:

Example

Here are the examples to set background of an HTML tag:



HTML Background Colors



<!-- Format 1 - Use color name 


This background is yellow





This background is sky blue





This background is green

--> This will produce following result:

This background is yellow

This background is sky blue

This background is green

Html Background with Images

The background attribute can also be used to control the background of an HTML elmement, specifically page body and table backgrounds. You can specify an image to set background of your HTML page or table. Following is the syntax to use background attribute with any HTML tag.

Note: The background attribute is deprecated and it is recommended to use Style Sheet for background setting.

The most frequently used image formats are JPEG, GIF and PNG images.

Example

Here are the examples to set background images of a table.



HTML Background Images



<!-- Set table background 


This background is filled up with HTML image.

--> This will produce following result:

This background is filled up with HTML image.

Patterned & Transparent Backgrounds

You might have seen many pattern or transparent backgrounds on various websites. This simply can be achieved by using patterned image or transparent image in the background.
It is suggested that while creating patterns or transparent GIF or PNG images, use the smallest dimensions possible even as small as 1x1 to avoid slow loading.

Example

Here are the examples to set background pattern of a table:



HTML Background Images



<!-- Set a table background using pattrern 


This background is filled up with a pattern image.





This background is filled up with a pattern image.

--> This will produce following result:

This background is filled up with a pattern image.

Saturday, July 25, 2015