Lessons Community Resources Tools

Background Image Position

Ever wondered how you could stop a image from repeating itself? These tricks will show you how.

Example:




The above image does not repeat.

Code:

<HEAD>
<style type="text/css">
<!--
BODY {background : url(yinyang.gif) no-repeat}
-->
</style>
</HEAD>

You can also specify the alignment for the non repeating image, the following code shows how.

Code:

<HEAD>
<style type="text/css">
<!--
BODY {background : url(yinyang.gif) no-repeat center}
P {background : url(yinyang.gif) no-repeat left}
DIV {background : url(yinyang.gif) no-repeat right}
-->
</style>
</HEAD>

Or specify the direction where the image can repeat.

Example:

repeat-x


                repeat-y






Code:

<HEAD>
<style type="text/css">
<!--
BODY {background : url(yinyang.gif) repeat-x}
P {background : url(yinyang.gif) repeat-y}
-->
</style>
</HEAD>

And you can also specify its alignment.

<HEAD>
<style type="text/css">
<!--
BODY {background : url(yinyang.gif) repeat-x center}
P {background : url(yinyang.gif) repeat-x left}
DIV {background : url(yinyang.gif) repeat-x right}
-->
</style>
</HEAD>