Background css là cách thiết lập màu nền, ảnh nền cho các thẻ HTML cũng như cho toàn bộ website, đây là một thuộc tính khá quan trọng mà bạn cần phải nắm vững vì hầu hết đều có sử dụng thuộc tính này để tạo background với các hình ảnh hoặc màu sắc cho website.

1. Tạo màu nền background-color

Thuộc tính background-color giúp định màu nền cho một thành phần nào đó trên trang web với giá trị là màu sắc của background. Có thể sử dụng mã màu hoặc tên tiếng anh của màu sắc.


body{

background-color: red;

}

hoặc


body{

background-color: #fb0320;

}

hoặc


body{

background: #fb0320;

}

Cả 3 cách viết trên sẽ cho ta một trang web có nền là màu đỏ

Trong đó, giá trị của thuộc tính background-color có thể là:

  • Mã màu hệ hex, ví dụ: #000000.
  • Hệ màu RGB, ví dụ: rgb(255,255,0).
  • Tên màu: red, blue, black.

2. Tạo hình nền background-image

Trường hợp mã màu đơn thuần không đủ đẹp mắt, thì chúng ta sẽ sử dụng thuộc tính background-image để định ảnh nền cho thành phần nào đó trên website.


body{
 background: url('bg-image.png');
}

hoặc


body{
background-image: url('bg-image.png');
}

3. Cho phép lặp hoặc không lặp background

vấn đề lặp background này ta tìm hiểu 4 nội dụng là:

  • no-repeat : không lặp
  • repeat: cho phép lặp
  • repeat-x : lặp theo chiều ngang
  • repeat-y : lặp theo chiều đứng

no-repeat


body{
 background-image: url('bg-image.png');
 background-repeat: no-repeat;
}

repeat


body{
background-image: url('bg-image.png');
background-repeat:repeat;
}

repeat-x


body{
 background-image: url('bg-image.png');
 background-repeat:repeat-x;
}

repeat-y


body{
 background-image: url('bg-image.png');
 background-repeat:repeat-y;
}

4. Thiết lập vị trí hiển thị cho background

Khi sử dụng background không lặp và muốn background hiển thị ở một ví trí nào đó như center, left, right, … thì bạn sử dụng thuộc tính background-position.


background-position: po1 po2;

các giá trị po1, po2 là: bottom: ở dưới, left: bên trái,right: bên phải,center: ở giữa,top: ở trên

Ví dụ: hiển thị background ở giữa


body{
 background-image: url('bg-image.png');
 background-repeat: no-repeat;
 background-position: center;
}

5. Tạo ảnh nền đứng yên khi kéo thanh trượt

Nếu trang web dài quá thì khi bạn lăn chuột background sẽ kéo theo nên nếu bạn muốn nó đứng im thì sử dụng thuộc tính background-attachment. Nó có hai thuộc tính:

  • fixed: sẽ đứng im
  • scroll: sẽ di chuyển theo khi kéo

#demo{
background-image: url('bg-image.png');
background-repeat: no-repeat;
background-attachment: fixed;
height: 1200px;
}

thiết lập chiều cao 1200px là để xuất hiện thanh trượt

6. Viết tắt thuộc tính background

Trong số các ví dụ trên có thể thấy có 2 cách viết cho background là background và background-image(color,repeat,…), cách viết background này là dạng viết tắt.


h1{
background: url('bg-image.png') no-repeat bottom fixed;
}

Kết luận

  1. Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
  2. Cảm ơn các bạn đã đọc.

Nongdanit.info
[CSS] – Bài 3 – Thuộc tính background trong CSS