Thiết Lập Hình Nền Trong CSS - Tìm ở đây

Thuộc tính Background trong CSS dùng để định nghĩa background (hình nền) cho các phần tử

Các thuộc tính Background trong CSS bao gồm:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color

Thuộc tính background-color xác định màu nền cho các phần tử

Background Color của một trang được xác định theo cấu trúc sau:

Ví dụ 1:

body { background-color: lightblue; }

Trong CSS, có nhiều cách định kiểu màu, thường được sử dụng theo các cách sau:

• Theo tên tiếng anh – ví dụ: “Red”- màu đỏ
• Theo kết hợp giá trị màu RGB – ví dụ: “rgb(255, 0, 0)”- màu đỏ
• Theo hệ thập lục phân HEX – ví dụ: “#ff0000” – màu đỏ

Bạn có thể tham khảo bài

Bài 5: Màu trong CSS

để hiểu rõ hơn về thuộc tính này.

Trong ví dụ dưới đây, thẻ <h1>, <p> và <div> sẽ có background color khác nhau:

Ví dụ 2:

h1 { background-color: green; }div { background-color: lightblue; } p { background-color: yellow; }

Background Image

Thuộc tính background-image xác định một hình ảnh làm background cho một phần tử.

Mặc định thì hình ảnh sẽ được lặp lại vì thế nó bao phủ toàn bộ phần tử.

Background image của một trang được xác định theo cấu trúc sau:

Ví dụ 3:

body { background-image: url(“paper.gif”); }Lưu ý: khi sử dụng hình ảnh làm background, thì bạn nên sử dụng hình ảnh mà nó không gây ảnh hưởng lên các văn bản. Nếu không ảnh đó sẽ đè hoặc làm mờ chữ hoặc nội dung trang web của bạn.

Dưới đây là ví dụ về sự kết hợp không tốt giữa văn bản và background (hình nền)

Ví dụ 4:

body { background-image: url(“bgdesert.jpg”); }

Background Image – Lặp lại ảnh theo chiều dọc hoặc ngang

Mặc định thì thuộc tính background-image sẽ lặp ảnh cả 2 dạng dọc và ngang (horizontally và vertically).

Một số ảnh nên được lặp ngang hoặc dọc, nếu không thì trông nó rất là xấu, không đẹp mắt, giống như sau:

Ví dụ 5:

body { background-image: url(“gradient_bg.png”); }

Nếu như ảnh trên chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;), thì sẽ trông tốt hơn:

Ví dụ 6:

body { background-image: url(“gradient_bg.png”); background-repeat: repeat-x; }

Lưu ý: Để lặp lại một image theo chiều dọc (vertically), chúng ta set background-repeat: repeat-y;

Background Image – Thiết lập vị trí và không lặp

Để hiển thị hình nền chỉ một lần cũng được xác định bởi thuộc tính background-repeat:

Ví dụ 7:

body { background-image: url(“img_tree.png”); background-repeat: no-repeat; }

Trong ví dụ trên background image hiển thị cùng nơi với text. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không che khuất text quá nhiều.

Vị trí của hình ảnh được xác định với thuộc tính background-position:

Ví dụ 8:

body { background-image: url(“img_tree.png”); background-repeat: no-repeat; background-position: right top; }

Background Image – Cố định vị trí

Để chỉ định ảnh nền sẽ cố định (tức là nó sẽ không bị di chuyển mất khi cuộn), sử dụng thuộc tính background-attachment:

Ví dụ 9:

body { background-image: url(“img_tree.png”); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }

Thuộc tính background – Viết code ngắn

Để rút ngắn code, bạn có thể chỉ định tất cả các thuộc tính background trên cùng một dòng duy nhất. Nó được gọi là thuộc tính Shorthand.

Ví dụ 10:

body { background: #ffffff url(“img_tree.png”) no-repeat right top; }

Khi sử dụng thuộc tính shorthand thì thứ tự giá trị thuộc tính sẽ là :

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Nếu nhu cầu của bạn không cần sử dụng hết thuộc tính này trong shorthand thì không quan trọng, bạn chỉ việc không đưa nó vào miễn sao vẩn theo thứ tự như trên là được.

Tất cả các thuộc tính Background trong CSS

Thuộc tính	Mô tả
background	Xác định tất cả các thuộc tính của background trong một khai báo
background-attachment	Xác định thành phần hình nền được cố định hoặc cuộn so với trang. Được sử dụng kèm với giá trị background-image.
background-color	Xác định màu nền cho một phần tử.
background-image	Xác định hình nền cho một phần tử.
background-position	Xác định vị trí hình ảnh cho phần tử. Được sử dụng kèm với giá trị background-image
background-repeat	Xác định hình nền sẽ được lặp lại.