CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Background Properties


CSS Background properties like background-color, background-image, background-position, background-repeat, background-attachment properties and many more.

Here are some CSS Background properties listed with example.


CSS background-color

CSS background-color property set background color.

Example Code:

<body>
	<p style="background-color:orange;">This paragraph background color orange</p>
</body>

Run it...   »

Example Result:

This paragraph background color orange


CSS background-image

CSS background-image property set image in background.

Example Code:

<body>
	<p style="background-image:url(/jix/img_nat.png);color:#FFFFFF; height:130px;width:200px;font-size:20px">
	This example is Background Image set in element.</p>
</body>

Run it...   »

Example Result:

This example is Background Image set in element.

CSS background-repeat

CSS background-repeat property repeat image both side horizontaly or varticaly. CSS background-repeat property posible value is repeat, no-repeat, repeat-x (verticaly repeat), and repeat-y (horizontaly repeat).

Example Code:

<body>
	<p style="background-image:url(/jix/img_nat.png);height:120px; background-repeat:no-repeat;">This example is Background repeat.</p>
</body>

Run it...   »

Example Result:

This example is Background repeat.


CSS background-attachment

CSS background-attachment property use to set background image in different type attachment like fixed, scroll.

Example Code:

<body>
	<p style="background-image:url(/jix/img_nat.png);height:130px;width:200px;overflow:scroll;background-attachment:fixed;color:white;">This example is Background attachment image is fixed 
	means image does not moved only fixed attached a image. background attachment posible value fixed or scroll. you can use this value and display results.This example is Background attachment 
	image is fixed  means image does not moved only fixed attached a image. background attachment posible value fixed or scroll. you can use this value and display results.</p>
</body>

Run it...   »

Example Result:

This example is Background attachment image is fixed means image does not moved only fixed attached a image. background attachment posible value fixed or scroll. you can use this value and display results.This example is Background attachment image is fixed means image does not moved only fixed attached a image. background attachment posible value fixed or scroll. you can use this value and display results.

CSS background-position

CSS background-position property use to set background image in different type position like left, right, center, top, bottom.

Example Code:

<body>
	<p style="background-image:url(/jix/img_nat.png);height:120px;background-repeat:no-repeat;background-position:150px;"> This example is Background Position left 150 pixel.</p>
</body>

Run it...   »

Example Result:

This example is Background Position left 150 pixel.