Background Images with CSS

This is done as follows:

identifier {     background-image: url(“images/anImage.png”);     background-repeat: repeat; }

“identifier” refers to the specific section you want to have the background.
“Repeat” in general, can be replaced with “repeat-y”, “repeat-x”, or “no-repeat” to define specific repetition of the image or no repetition.

With the additional parameter “background-position”, you can set the position of the background, e.g.,like this:

background-position: left center;
background-position: 40px 60px;

Finally, there is also the possibility to control the size of the background as follows:

background-size: 50px 80px;

If you want the image to cover the entire background regardless of its size, you use:

background size: cover;

If you use background-size: contain;

It will show the whole picture. If it is too small, it will repeat, unless you prevent that with the ‘no-repeat’ setup mentioned above.