18: Background Image and Color Property

Background Properties:

1) Background Color
2) Background Image

Background-color is a property  to apply color on area occupied by a Tag, like h1, p, div , table etc.

For example:

<h1>This is heading</h1>

<p style="background-color:#ff0">

We've said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated software program such as Macromedia Dreamweaver or Microsoft Frontpage.

</p>

Output in Browser 

<p style="background-image:url(images/timer.jpg) ">

We've said here to use a basic text-editor, such as Notepad, but you may be tempted 

to use a dedicated software program such as Macromedia Dreamweaver or Microsoft Frontpage.We've said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated software program such as Macromedia Dreamweaver or Microsoft Frontpage.

Output in Browser 

Short Hand Technique:

We can also use background property to specify image, color and position
all together like this:

body { background: green url(image/timer128.png) no-repeat top left; }

• background-color, which we have come across before.
• background-image, which is the location of the image itself.
• background-repeat, which is how the image repeats itself. This can be repeat (equivalent to a 'tile' effect across the whole background), repeat-y (repeating on the 'y-axis', above and below), repeat-x (repeating on the 'x-axis', side-by-side) or no-repeat (which shows just one instance of the image).
• background-position, which can be top, center, bottom, left, right or any sensible combination, such as above.

 Output in Browser 

powered by multimediagyan ©