CSS Background in Blogger Blogspot

 How to set backgrounds for different HTML elements. You can set the following background properties for an item:

• The background image property is used to set the background image of an item.
• The Background Repeat feature is used to control the repetition of a background image.
• The Background Repeat feature is used to control the repetition of a background image.
• The background-position property is used to control the position of an image in the background.
• The background-attachment property is used to control the scrolling of an image in the background.
• The background property is used as a shorthand to specify the number of other background properties.

How to Set the Background Color 

Here is an example showing how to set the background color to part.

<p style="background-color:yellow;">This text has a yellow background color.</p>

It will produce the following result:

This text has a yellow background color.

How to Set the Background Image

<table style="background-image:url(/images/pattern1.gif);">
<tr><td>
This table has background image set.
</td></tr>
</table>

How to Repeat the Background Image in Blogger

The following example shows how to repeat the background image if the image Small. You can use the non-repeat value for the background-repeat feature if you don't want to duplicate an image. In this case, the image will be shown only once. By default, the background-repeat feature will have a repeat value.

<table style="background-image:url(/images/pattern1.gif);background-repeat: repeat;"><tr><td>This table has background image which repeats multiple times.</td></tr></table>

The following example shows how to duplicate the background image vertically.

<table style="background-image:url(/images/pattern1.gif);background-repeat: repeat-y;"><tr><td>This table has background image set which will repeat vertically.</td></tr></table>

The following example shows how to duplicate the background image horizontally.

<table style="background-image:url(/images/pattern1.gif);background-repeat: repeat-x;"><tr><td>This table has background image set which will repeat horizontally.</td></tr></table>

How to Set the Background Image Position in Blogger

<table style="background-image:url(/images/pattern1.gif);

background-position:100px;">

<tr><td>

Background image positioned 100 pixels away from the left.

</td></tr>

</table>

The following example demonstrates how to set the background image position 100pixels away from the left side and 200 pixels down from the top. 

The following example shows how to position the background image 100 Pixel away from the left side and 200 pixels down from the top.

<table style="background-image:url(/images/pattern1.gif);

background-position:100px 200px;">

<tr><td>

This table has background image positioned 100

pixels away from the left and 200 pixels from the top.

</td></tr>

</table>

 How to Set the Background Attachment

The background-attachment determines whether the background image is fixed or scrolled with it The rest of the page.

The following example explains how to set a static background image.

<p style="background-image:url(/images/pattern1.gif);background-attachment:fixed;">This parapgraph has fixed background image.</p>

The following example shows how to set a scrolling background image. 

<p style="background-image:url(/images/pattern1.gif);background-attachment:scroll;">This parapgraph has scrolling background image.</p>

How to reduce ownership 

You can use the background feature to set all background properties at once. For

Example:-

<p style="background:url(/images/pattern1.gif) repeat fixed;">This paragraph has a fixed repeated background image.</p>

I hope you enjoy this post and the photos. CSS Background in Blogger Blogspot.