i

Learn HTML and CSS in 10 Days

Background Position and Shorthand Background Image Values

Background Position

The background images, by default, are placed at the top left corner of an element. But, by utilizing the property of 'background-position,' one can manage the exact location where the background image should be placed in accordance with the corner.

div {

  background-image: url("alert.png");

  background-position: 20px 10px;

  background-repeat: no-repeat;

}

The property of ‘background-position’ needs values: Vertical offset (2nd value) and horizontal offset (1st value).

Shorthand Background Image Values

The properties till now i.e. background-color, background-image, background-position, and background-repeat might be folded up into a shorthand value for the ‘background’ property. The order is ‘background-color’, ‘background-image’, ‘background-position, and ‘background-repeat’.

div {

  background: #b2b2b2 url("alert.png") 20px 10px no-repeat;

}

Background Image Example

In the example below, we are going to use the ‘background’ property along with a shorthand value that adds up ‘background-color’, ‘background-image’, ‘background-position’ and ‘background-repeat’ values.

HTML

CSS

.notice-success {

  background: #67b11c url("tick.png") 20px 50% no-repeat;

  border: 2px solid #467813;

  border-radius: 5px;

  color: #fff;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  padding: 15px 20px 15px 50px;

}