Học Css – Thuộc tính Background trong css

Thuộc tính background đóng vai trò rất quan trọng trong css, nếu bạn đã học css mà không biết về thuộc tính này thì coi như trình độ css của bạn cũng mới chỉ như đứa trẻ tập đi. Thực chất trong css thì thuộc tính background rất dễ học và vận dụng. Background đóng vai trò xác định hiệu ứng nền cho các phần tử vì vậy trong một tài liệu web bạn sẽ gặp rất nhiều về nó.

Màu nền

Cách đơn giản nhất để sét thuộc tính background cho tài liệu web đó là màu nền của 1 phần tử, nó có tác dụng nhất định đến phần tử đó hoặc cũng có thể nó sẽ có tác dụng với cả website nếu như bạn đang css cho body.

Màu nền của một tài liệu web được viết như thế này:

body{
     background-color:#6B969A
}

Màu sắc trong css được xác định bởi 3 yếu tố:

  1. Giá trị HEX mã màu dạng: #545454
  2. Giá trị RGB vị trí màu dạng: rgba(204, 204, 204, 1)
  3. Xác định bằng tên: red, yellow…

Ví dụ về cách set thuộc tính background sử dụng cả 3 kiểu màu như trên:

ul{
   background-color: #4d90fe;
}
a{
  background-color: blue;
}
p{
  background-color: rgba(53, 232, 200, 0.11);
}

Background image

Thông thường có những vị trí cần những thuộc tính background hoa văn mà lúc đó thuộc tính thường không thể đảm nhiệm nổi thì việc dùng hình ảnh để thay thế là vô cùng hợp lý.

Khi sử dụng hình ảnh làm backgroud thì nó sẽ có tác dụng với những phần tử nhất định mà ta quy định, và background image nó sẽ có dạng như thế này.

.vi-du{
     background-image: url("https://baonguyenblog.com/wp-content/uploads/2015/12/logo.png");
} /*xử dụng cả tên miền để xác định ảnh nền nằm ngoài blog, không lưu trữ tên blog*/
.vi-du{
     background-image: url("/wp-content/uploads/2015/12/logo.png");
}/*không gõ cả url ra vì ảnh được lưu tại blog, tự động nó sẽ tìm trong thư mục này */

Thuộc tính trong background

Thông thường khi bạn thiết lập background bằng hình ảnh mà bạn chỉ khai báo cấu trúc như trên thì không đủ, vì vậy trong background cũng có những thuộc tính nhất định mà bạn phải nhớ.

background-repeat: repeat-x; Lặp hình ảnh theo chiều ngang, ngược lại thì repeat-y sẽ lặp theo chiều dọc.

background-repeat: no-repeat; Thiết lập hình ảnh không lặp, chỉ xuất hiện 1 lần.

background-position: xác định vị trí của hình ảnh. Ví dụ xác định ảnh cách bên trái 50px và đi từ trên xuống 20px thì ta làm như sau: background-position: 50px 20px;

background-attachment: Cố định hình ảnh khi ta cuộn trang, ví dụ background-attachment: fixed; sẽ để hình ảnh đứng nguyên tại ví trí khi ta cuộn trang.

Ngoài ra đối với một số trường hợp chúng ta có thể rút ngắn mã css lại bằng cách gộp chúng lại khi khai báo url hình ảnh.

/*chưa rút gọn*/
body {
    background-color: #ffffff;
    background-image: url("img_logo.png");
    background-repeat: no-repeat;
    background-position: right top;
}
/*đã rút gọn*/
body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Như vậy bạn đã biết cách sử dụng thuộc tính background trong css rồi đúng không, thực sự là rất đơn giản. ở bài tiếp theo chúng ta sẽ tìm hiểu kỹ về position.

Bài viết khác cùng serie

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái công sở và thích bàn luận quân sự.

Leave a Reply

1 Comment on "Học Css – Thuộc tính Background trong css"

Notify of
avatar
Sort by:   newest | oldest | most voted
Nam VT
Guest

Cảm ơn anh thực sự em mới học css, anh viết rất dễ hiểu, mong anh ra nhiều tut mới ạ

wpDiscuz

Create Account



Log In Your Account