Positioning background image

There are a few ways to position the background image. You can use the background–position property with values that are in pixels, relative positions, and percentages. In PrestaShop, most of the syntaxes used are based on relative position.

As an example, a header link uses top center in this property.

#header_links a {
  display: block;
  height: 15px;
  color: #595a5e;
  padding-top: 19px;
  text-align: center;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: top center;
  background-color: transparent
}

Note

You can learn more about positioning at: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-position

Pop quiz

How would you specify the following values for the background position property?

1. value positions the image 5 centimeter from the left and 10 centimeter down the page

2. value positions the image one quarter horizontally and centrally down the page

3. value positions the image at the top-left corner of the page...