Background

alt

Thuộc tính background được dùng để định dạng nền cho thành phần.

  • background-color: xác định màu cho nền.
  • background-image: xác định hình cho nền.
  • background-position: xác định vị trí cho nền, thường được sử dụng kèm với background-image.
  • background-repeat: xác định hình nền được lặp lại như thế nào.
  • background-attachment: xác định thành phần nền được cố định hoặc cuộn so với trang, được sử dụng kèm với background-image.
  • background: dạng tổng quát, kết hợp của các loại background trên.
Background color
Box 1
.box {
	*background-color: #5cb85c;
}
Background gradient linear
Box 2
.box {
	*background: linear-gradient(90deg, #ff0000, #0000ff);
}
Background gradient radial
Box 3
.box {
	*background: radial-gradient(ellipse at center, red 0%, yellow 100%);
}
Background image
.box {
	*background-image: url(demo.png);
}
Background repeat X
.box {
	*background-image: url(demo.png);
	*background-repeat: repeat-x;
}
Background repeat Y
.box {
	*background-image: url(demo.png);
	*background-repeat: repeat-y;
}
Background NO repeat
.box {
	*background-image: url(demo.png);
	*background-repeat: no-repeat;
}
Background NO repeat + Position
.box {
	*background-image: url(demo.png);
	*background-repeat: no-repeat;
	*background-position: 100px 50px;
}
Mixin
.box {
	*background-image: #ff0000 url(demo.png);
	*background-repeat: no-repeat;
	*background-position: 100px 50px;
}
Position center center (50% 50%)
.box {
	*background-image: url(demo.png);
	*background-repeat: no-repeat;
	*background-position: center center;
}
Background Size Cover
.box {
	*background-image: url(demo.png);
	*background-repeat: no-repeat;
	*background-position: center center;
	*background-size: cover;
}
Background Size Contain
.box {
	*background-image: url(demo.png);
	*background-repeat: no-repeat;
	*background-position: center center;
	*background-size: contain;
}
Background custom
.box {
	*background-image: url(demo.png);
	*background-position: center center;
	*background-size: 100% 50%;
}
Background Multi-Options
.box {
	*background: url(demo.png) top left no-repeat, url(bg.png) bottom right no-repeat;
	*background-size: 100px, auto;
	*background-color: #ff0000;
}
HomeNext
TOP