When we are designing a website one of the things that we will always need is to know how to put a background on our web pages.
Although some time ago this was a task that could be done in HTML, since it was separated HTML for the structure and CSS for the design, it was this second language, the CSS, which was responsible for having the ability to put a background on a web page.
The CSS that allows us to set the background of the web page is background. Said element can be applied to the background of different elements. However, if we want to use it to set the background of the web page, we will have to use it on the body.
The structure of the element background is the following:
background: [color] [image] [repeat] [attachment] [position];
That is, we can indicate an RGB color, an image, we can indicate how it repeats or if it does not repeat. With attachment we can indicate whether it remains fixed or in scroll format and finally we can indicate the initial position in which the image will be placed.
The best thing you can do is read the documentation about the background element.
Thus, our code CSS will look like this:
<style type="text/css">
body {
background:url(background.gif) repeat 0 0;
}
</style>
We must remember that we have to put this code before the head.
Another thing to look at in the code is that we use the url() function to indicate the directory where the image is located. In our case, the page that we designed to put in the background of my website is in the same directory as the image. However, if we want to use another directory we can put the following:
<style type="text/css">
body {
background:url('/images/background.gif') repeat 0 0;
}
</style>
Now the image is in a directory called “images” which is in the root.
Finally we have to know that there is another property called background-image, which allows us to only indicate the image to use as the background of my web page, if we do not want to worry about the rest of the attributes.
In this case the code would look like this:
<style type="text/css">
body {
background-image:url('/images/background.gif');
}
</style>