Home » CSS » [CSS Tutorial] Bài 4: Background

[CSS Tutorial] Bài 4: Background

This entry is part 4 of 9 in the series CSS

background-color (màu nền):

Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt. (Giá trị transparent là giá trị mặc định nếu ta không khai báo thuộc tính background-color)

Ví dụ: Định dạng thẻ body có background màu đỏ:

Ngoài ra, để định màu một cách chính xác, ta có thể dùng mã màu.

Ví dụ: Định dạng thẻ h1 có màu là #298CBA

background-image (ảnh nền):

Thuộc tính background-image giúp ta chèn ảnh ảnh vào trang web.

Ví dụ: Chèn ảnh nền vào thẻ body.

Đầu tiên, ta tạo cấu trúc thư mục như sau:

CSS-Tutorial-Bai-4-Background-Anh-01

Copy file ảnh  background (file ảnh làm hình nền) vào thư mục img.

Tạo trang hello.html như sau:

File style.css nằm trong thư mục css có nội dung như sau:

Lưu ý: dấu “..” trong url có nghĩa là chúng ta cần đi ra ngoài 1 thư mục, sau đó mới vào được thư mục img chứa file ảnh background.png.

Khi đó, kết quả thu được:

CSS-Tutorial-Bai-4-Background-Anh-02

background-repeat (lặp lại ảnh nền): 

Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị:

  • repeat-x : Chỉ lặp lại ảnh theo phương ngang.
  • repeat-y : Chỉ lặp lại ảnh theo phương dọc.
  • repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
  • no-repeat: Không lặp lại ảnh.

Ví dụ: Tạo trang web ảnh nền không được lặp lại.

background-attachment (khóa ảnh nền):

background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:

scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh  nền sẽ đứng yên khi bạn đang cuộn trang web.

Ví dụ: Tạo trang web có ảnh nền cố định.

background-position (vị trí của ảnh nền):

Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình.

Với background-position, bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào.

background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position:

  • Đơn vị chính xác :  px(pixels),  in (inches),…
  • Đơn vị qui đổi:%,…
  • Vị trí đặc biệt: top, bottom, left, right.

Ví dụ:  Ảnh được định vị 200px từ trái qua và 300px từ trên xuống.

Ví dụ:  Ảnh được định vị 20%  từ trái qua và 30% từ trên xuống.

Ví dụ: Ảnh được định vị góc phải phía dưới.

Thuộc tính background rút gọn:

Khi sử dụng quá nhiều thuộc tính CSS sẽ gây khó khăn cho công tác chỉnh sửa cũng như tốn nhiều dung lượng ổ cứng cho nên CSS đưa ra một cấu trúc rút gọn cho các thuộc tính cùng nhóm.

Ví dụ: Ta có thuộc tính background được định dạng như sau:

Khi đó, ta có thể viết gọn lại thành:

Chú ý:  Theo mặc định thì các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.

Ví dụ, trong ví dụ trên,  chúng ta sẽ bỏ qua hai thuộc tính background-color background-attachment vì chúng có giá trị mặc định để viết gọn thành :

Series Navigation<< [CSS Tutorial] Bài 3: Vị trí đặt CSS và độ ưu tiên trong CSS[CSS Tutorial] Bài 5: Font >>
Share
  • Deep Snow

    Ad cho mình hỏi, cái để chèn một file css vào thì mình có thể dùng nhiều link được không vậy? kiểu mình muốn định dạng cho từng phần thành từng file thì chèn một lúc 3 dòng như này được không ad?

    • Vani

      Tất nhiên là được bạn nhé, không nhất thiết chỉ dùng 1 file css đâu.

    • Vani

      Được nha bạn. Bạn cứ tạo nhiều file CSS, rồi trong file HTML mình dẫn link tất các các file CSS.

  • tâm

    cho mình hỏi mình chèn 1 hình background nhưng chữ trong trang bị background khuất nên giờ phải làm sao?

    • Vani

      Bạn phải thay đổi background hoặc màu chữ sao cho phù hợp với nhau. Cái này thuộc phạm trù phối màu 🙂

Share
Free WordPress Themes - Download High-quality Templates