CSS Background
This tutorial article will help you to work with the background of your page and help you to make CSS design of your page look fancier.
<p style=”background-color:green;”>This text shows green color with in the paragraph that is specified in the tag.</p>
The above code can be used to decorate the background of any text with in the paragraph with the desired color. Now if you want to apply any image in the background in place of color then this can be done as shown below. Applying image in the background of any text will be a better example of CSS Website Design.
<p style=”height:100px;background-image:url(hello.gif);”>Hello.gif image is applied in the background.</p>
The code above is used to apply any image in the background of any text with in the paragraph. If the size of image is smaller than the size of paragraph in which it is to be applied then the image in the background repeats to cover the remaining space of paragraph. Now if you don’t want the image to repeat in the background then it should be specified in the P tag.
<p style=”height:100px;background-image:url(hello.gif);background-repeat:no-repeat;”>Hello.gif image is applied in the background with no-repeat property.</p>
The above code is used to specify that background should not be repeated with in the paragraph. Now you can also display the background image in the desired position with in the paragraph that means if you want the background image to be displayed in any specific location with in the paragraph then you can do so. Control on the appearance of background will help your CSS design to look better.
<p style=”height:100px;background-image:url(hello.gif);background-repeat:no-repeat; background-position:120px;”>Hello.gif image is applied in the background with no-repeat property.</p>
The above code is used to position the background image 120 pixels from left side of the web page. If you want to align your background image in the right direction then this also can be done just by putting the “right” keyword in the background position attribute.
<p style=”height:100px;background-image:url(hello.gif);background-repeat:no-repeat;background-position:right;”>Hello.gif image is applied in the background.</p>
The above code will align your background image in the right side of your web page with in the paragraph. You can download more examples and get more knowledge about how to use CSS background properties in the link below.
http://www.mastertutorialsonline.com
Processing your request, Please wait....
