Tuesday, October 16, 2012

No-Repeat Web Background

Adding a tiled image as a web background can sometimes cause a continuous repeat of the image, making the page look confusing and unprofessional. A simple code can fix the issue.

The above image is named "scrollcandle.jpg." In order to stop the background image repeat, use the following CSS code (placing the name of your image in the brackets following url):

<style type="text/css">body{ background: url(scrollcandle.jpg) black center no-repeat fixed; } </style>

Using the code will allow the background image to display as follows:

The properties of the code can also be adjusted to fit the background of your web page. For example, "black center" can be changed to color and alignment suited to your needs.

Click here to see a live sample of a no-repeat web background.