Attributes

  • background-image
  • background-repeat
  • background-size
  • background-position

Syntax

.container {
	background-image: url(path/to/your/image.jpg);
}

Repetition

.container {
	background-repeat: repeat; /* default */
}

.container {
	background-repeat: no-repeat;
}

Size

.container {
	background-size: auto; /* default */
	background-size: contain;
	background-size: cover;
}

contain vs. cover

see all image no empty parts
contain V
cover V

Position

.container {
	background-position: left top; /* default */
	background-position: center;
	background-position: top;
	background-position: bottom;
	background-position: left;
	background-position: right;
}