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.
The 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
<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.
<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.
Source : digicompdiy[dot]wordpress[dot]com
0 comments:
Post a Comment