Repeating and Covering Background Images

Images can be used in place of color for the  background on your website. When you decide to add a background image there are different ways to control the dimensions  and other characteristics of the background. In this post I will explain how to add a Repeating background image and a Covering Background Image. I will use the following image to make my background for this example.crayonThe code for background images should be placed at the beginning  of  your HTML document within your head element.  The  first part of the background code will be:

<style>
body{
background-image:url(‘IMAGE URL’);
}
</style>

This part will insert the image you wish to use into your web page. When adding this code to your website be sure to replace Image URL with the actual url linking to the picture you want to use.  The next part of the code will allow you to control rather or not your image will cover the entire page or will repeat multiple times across your webpage to cover the entire space. In order to make it so that the image you have chosen repeat both vertically and horizontally until filling the area of your webpage the following should be added bellow the above code

background-repeat:repeat;

After adding this part of the code your repeating background and code should look like this

repeat

<style>
body{
background-image:url(‘IMAGE URL’);

background-repeat:repeat;
}
</style>

In order to make your background cover the entire page a small change can be made to the previous code. The background-repeat:repeat line of the previous example should be replaced with background-repeat: no-repeat. Although this line will prevent your image from repeating itself it doesn’t insure that your image will be stretched and position in a way that will a low it to cover your entire page. Instead it may end up like this. In order to cover the entire page with the image after the background no repeat line the following should be added:

background-size: cover;

Your end results should look similar to this.

cover

<styles>
body {
background-image: url(crayon.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</style>

Note that because of the original size of the image when I made the image cover the entire page as opposed to repeat the image looks less clear. In order to avoid this high quality images should always be used especially for backgrounds.

Aisha Hughes

~ by aih4 on January 21, 2013.

3 Responses to “Repeating and Covering Background Images”

  1. Awesome post. Very helpful and straight forward step-by-step instructions. Does it matter how large the image is to begin with? You say high quality images should be used but any recommendation on height/width/? I guess that might depend upon whether or not you choose to repeat the image or not but if you want one solid picture, any suggestions for dimensions? Otherwise, great advice.
    -Pete

  2. Best Overall

    -Sarah Cinski

  3. best style.
    -brian coleman

Comments are closed.

 
%d bloggers like this: