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>