Day Three of Week Fifth

Background in CSS

Example
For Apply Background Color Syntax
background-color :- Color name or color code
Example(Background Color)

Normal Border 

<h3 style='background-color:#AA00FF'>Normal Border </h3>
For Apply Background Image Syntax
S No.Element Name Description Values
1background-imageFor Background ImageImage path
2background-repeatFor repeat or no-repeatno-repeat, repeat-x, repeat-y and repeat
3background-positionSet Position of background imageleft,right,center top,bottom
4background Shorthand Method
Example(Background Image)

Set Background Image

<h3 style="background-image:url('img/bg2.jpg')">Set Background Image</h3>
Example (Background Image Repeat Property)

No repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo repeatNo

X Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat ImageX Axis Repeat Image

Y Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat ImageY Axis Repeat Image

Repeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat ImageRepeat Image

<h3 style="background-image:url('img/bg2.jpg');background-repeat:no-repeat">No Repeat Image<br><br><br><br><br><br><br><br><br>
<h3 style="background-image:url('img/bg2.jpg');background-repeat:repeat-x">X Axis Repeat Image<br><br><br><br><br><br><br><br><br></h3></h3>
<h3 style="background-image:url('img/bg2.jpg');background-repeat:repeat-y">Y Axis Repeat Image<br><br><br><br><br><br><br><br><br></h3>
<h3 style="background-image:url('img/bg2.jpg');background-repeat:repeat">Repeat Iamge<br><br><br><br><br><br><br><br><br></h3>
Example (Background Image Position)

No Repeat Image and right top Position of Image








No Repeat Image and center top of image








No Repeat Image left top position of image








<h3 style="background-image:url('img/tree.png');background-repeat:no-repeat;background-position:right top">No Repeat Image and right top Position of Image<br><br><br><br><br><br><br><br><br></h3>
<h3 style="background-image:url('img/tree.png');background-repeat:no-repeat;background-position:center top">No Repeat Image and center top of image<br><br><br><br><br><br><br><br><br></h3>
<h3 style="background-image:url('img/tree.png');background-repeat:no-repeat;background-position:left top">No Repeat Image left top position of image<br><br><br><br><br><br><br><br><br></h3>
Example (Background Image Position)

Shorthand Method for using Background








<h3 style="background:cyan url('img/tree.png') no-repeat right top">Shorthand Method for using Background<br><br><br><br><br><br><br><br><br></h3>
</div>