Menu
GIỚI THIỆU
  • Trong bài này chúng ta tìm hiểu cách tạo màu nền cho các thẻ HTML, vì hầu hết các trang web đề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 (color).

Bài 04: Tạo màu nền với CSS background

Trong bài hướng dẫn này, bạn sẽ được học cách làm thế nào để định dạng màu sắc và phông nền trên trang web. Chúng ta sẽ cùng xem xét các phương pháp để định vị trí và kiểm soát các hình ảnh dùng làm nền qua các thuộc tính CSS sau đây:

  • color (màu áp dụng trên trang)
  • background-color (màu áp dụng cho nền)
  • background-image (hình ảnh áp dụng cho nền)
  • background-repeat (sự lập lại các ảnh trên nền)
  • background-attachment (nhúng ảnh vào nền)
  • background-position (vị trí ảnh nền)
  • background (thuộc tính rút gọn của nền)

Màu: thuộc tính [color]

Thuộc tính color dùng để mô tả màu sắc của các phần tử HTML phía trên nền (foreground elements)

HTML elements sẽ được tạm dịch là những phần tử bao gồm thẻ HTML và nội dung bên trong của nó.

Ví dụ
<p>đây là phần tử HTML</p>

Ví dụ bạn muốn tất cả tiêu đề đều có màu đỏ. Các tiêu đề này đều thuộc phần tử HTML <h1>. Đoạn code bên dưới định nghĩa phần tử <h1> có màu đỏ.

h1 {color: #ff0000;}

Giá trị thuộc tính colors có thể sử dụng hệ thập lục phân như ví dụ trên (#ff0000), hoặc sử dụng tên chuẩn  (“red”) hoặc giá trị theo hệ màu rgb (rgb(255,0,0)).

Thuộc tính [background-color]

Thuộc tính background-color dùng để xác định màu nền của các phần tử HTML.

Thẻ <body> chứa tất cả nội dung của tài liệu HTML. Do vậy, để thay đổi màu nền của toàn trang HTML, chúng ta sẽ áp dụng thuộc tính background-color cho nó.

Bạn cũng có thể sử dụng màu nền cho các tiêu đề và chữ. Trong ví dụ dưới đây hai màu khác nhau được áp dụng cho các phần tử <body> và <h1>.

body {background-color: #FFCC66;}
h1 { color: #990000; background-color: #FC9804;}

Bạn lưu ý nếu có trên 2 thuộc tính, các thuộc tính phải kết thúc bằng dấu chấm, phẩy (;) như ví dụ như thẻ  <h1>ở trên.

Thuộc tính ảnh nền [background-image]

Thuộc tính CSS background-image thường được sử dụng để nhúng ảnh vào nền.

Bạn có thể sử dụng ảnh dưới đây để thử, click chuột phải và chọn “save image as

background-image
background-image
body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
 
h1 {
color: #990000;
background-color: #FC9804;
}
Lưu ý: ví dụ trên, ảnh css3-logo-300×300.png được lưu cùng thư mục chứa tập tin CSS, bạn có thể sử dụng đường dẫn tương đối nếu ảnh nằm ở thư mục khác, vi dụ: ../images/ss3-logo-300×300.png hoặc dùng đường dẫn tuyệt đối, ví dụ http://thietke.website/images/css3-logo-300×300.png
 

Tùy chỉnh lập lại ảnh nền [background-repeat]

Ở ví dụ trên, bạn có nhận thấy rằng ảnh nền được lập lại theo chiều dọc và chiều ngang trên toàn trang, làm thế nào để kiểm soát nó? Thuộc tính background-repeat chính là cách để bạn xác định ảnh nền sẽ lập lại như thế nào hoặc không cho phép lập lại.

Bản bên dưới mô tả các giá trị khác nhau của thuộc tính background-repeat.

Ví dụ để tránh ảnh nền lập lại, đoạn code sẽ như dưới đây:

body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
background-repeat: no-repeat;
}
 
h1 {
color: #990000;
background-color: #FC9804;
}

Cố định vị trí ảnh nền [background-attachment]

Thuộc tính background-attachment dùng để khai báo cố định vị trí ảnh nền hoặc phụ thuộc theo vị trí phần tử chứa nó.

Một ảnh nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML

Bảng dưới đây mô tả 2 giá trị khác nhau của thuộc tính background-attachment.

Giá trị Mô tả
Background-attachment: scroll Ảnh sẽ di chuyển theo văn bản khi di chuyển thanh cuộn màn hình
Background-attachment: fixed Ảnh sẽ được khóa ở vị trí cố định

Đoạn code dưới đây khai báo vị trí cố định của ảnh, không di chuyển khi người xem di chuyển thanh cuộn.

body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
 
h1 {
color: #990000;
background-color: #FC9804;
}

Định vị trí ảnh nền [background-position]

Mặc định, một ảnh nền có trí ở góc trái phía trên màn hình. Thuộc tính background-position cho phép bạn thay đổi vị trí của hình nền và đặt nó ở bất cứ vị trí nào bạn muốn trên màn hình cửa sổ trình duyệt.

Có nhiều cách để xác định giá trị của thuộc tính background-position. Nhưng tất cả đều là một cặp đôi giá trị xác định tọa độ của ảnh trên màn hình. Ví dụ, giá trị ‘100px 200px’ khai báo cho trình duyệt biết rằng ảnh nền nằm ở vị trí cách lề trái 100px và lề trên 200px của cửa sổ trình duyệt.

Tọa độ cũng có thể xác định bằng giá trị phần trăm, hoặc các đơn vị (pixels, centimetres, points ….) hoặc dùng các từ mô tả chuẩn như top, bottom, center, left và right. Ảnh minh họa bên dưới sẽ giúp bạn hình dung ra các giá trị tọa độ tương đương với vị trí nào trên cửa sổ trình duyệt:

background-position
background-position

Bảng giá trị thuộc tính dưới đây cũng cho bạn những ví dụ về tọa độ

Đoạn code bên dưới khai báo ảnh nền nằm ở vị trí sát lề dưới và bên phải

body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
 
h1 {
color: #990000;
background-color: #FC9804;
}

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

Thuộc tính background có thể khái báo tất cả các thuộc tính của hình nền đã liệt kê ở trên.

Sử dụng thuộc tính background bạn có thể tiết kiệm được số ký tự khai báo và dễ hiệu chỉnh hơn.

Ví dụ, hãy xem đoạn code dưới đây

background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

Nếu sử dụng thuộc tính background bạn sẽ có kết quả tương tự nhưng đoạn code sẽ ngắn hơn nhiều

background: #FFCC66 url("css3-logo-300x300.png") no-repeat fixed right bottom;

Các thuộc tính được liệt kê theo thứ tự:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Nếu có bất kỳ thuộc tính nào không được khai báo, giá trị mặc định sẽ được sử dụng. Ví dụ, nếu background-attachment và background-position không được khai báo trong đoạn code dưới đây:

background: #FFCC66 url("css3-logo-300x300.png") no-repeat;

Hai thuộc tính không được khai báo , nên giá trị mặc định của background-attachment là  scroll  và background-position là top left

Tóm lược bài học

Trong bài học này, bạn đã học được một số kỹ thuật cần thiết để kiểm soát hiển thị hình nền trên các trang HTML bằng CSS. Định dạng text bằng các thuộc tính trong CSS các bạn chắc chắn sẽ hứng thú với những kỹ thuật CSS để định dạng font chữ theo cách riêng của mình.

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Bài 04: Tạo màu nền với CSS background
Tags: tạo nền background bằng css background css thiết lập nền website với css
Category: CSS Cơ bản
Mạnh xã hội: Follow fanpage của team https://www.facebook.com/hoicode/ để tiếp tục theo dõi các loạt bài mới nhất về CSS Cơ bản,Java,C,C++,Javascript,HTML,PHP,Python,Database,Mobile.... mới nhất của chúng tôi.

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha