How to Get an Image to Repeat With CSS as Content Is Added
When you display an image as a background on your website, the picture appears just once behind the text on your page. This nonrepeat problem occurs when you insert the graphic with HTML; however, using CSS instead gives you control over how the image duplicates. Use your computer's text editor to enter the CSS code needed to get an image to automatically repeat as you add content.
Other People Are Reading
Instructions
-
-
1
Upload the background image to your Web host in the same folder or directory where your website files are found. Record the URL address of your picture -- for example, "http://www.site.com/images/background.gif."
-
2
Launch your text editor software and bring up the website document that has the image you want repeated.
-
-
3
Enter the following CSS code after the beginning "<head>" tag:
<style type="text/css">
</style>
-
4
Type "body { }" between the style elements to create a rule that controls the overall appearance of your page. Enter "background-image: URL (' ');" inside the curly brackets and type the URL address of your graphic, like the following example:
body { background-image: URL ('http://www.site.com/images/background.gif'); }
-
5
Enter "background-repeat: ;" inside the brackets and type "repeat" as the value. Alternately, enter "repeat-x" after the background-repeat attribute to specify you only want the image to duplicate horizontally, or type "repeat-y" to instruct it to just display vertically. To illustrate:
body { background-repeat: repeat; }
-
6
Save your file and upload it back to your host. Your finished CSS looks like this example:
<style type="text/css">
body { background-image: URL ('http://www.site.com/images/background.gif');
background-repeat: repeat;
}
</style>
-
1
References
- Photo Credit Ciaran Griffin/Stockbyte/Getty Images
