Chủ đề nổi bật

Bài 04: thiết lập màu nền với CSS background

Trong bài này chúng ta tìm hiểu cách thiết lập màu nền cho các thẻ HTML , đâ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 ...

Trong bài này chúng ta tìm hiểu cách thiết lập màu nền cho các thẻ HTML, đâ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 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). Không đi đâu xa mà tại website code24h.com bạn thấy hai bên trái phải ngoài cùng có màu nền xám xám, đó là mình sử dụng thuộc tính background-image để thiết lập đấy.

Trong bài này chúng ta sẽ tìm hiểu một số thuốc tính backgrounds sau:

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

Lưu ý: Vì vấn đề khó khăn trong demo nên mình sẽ viết dạng internal (xem các cách viết css)

1. CSS thiết lập màu nền cho background

Để thiết lập màu nền cho background thì ta sử dụng thuộc tính CSS backgroud-color hoặc background với giá trị của nó là màu sắc của background. Bạn có thể sử dụng mã màu hoặc tên màu bằng tiếng anh đều được.

Ví dụ: thiết lập background cho toàn trang màu đỏ

Thẻ mà ta có thể thiết lập background toàn trang là thẻ body nên ta chỉ cần gán CSS cho thẻ body là được.

XEM DEMO

body{
    background: red;
}

Hoặc:

body{
    background: #fb0320;
}

Hoặc:

body{
    background-color: #fb0320;
}

2. CSS thiết lập hình nền cho backround

Thiết lập hình nền thì ta sử dụng thuộc tính CSS backgrond hoặc background-image với tham số truyền vào là URL của hình ảnh.

Ví dụ: Lấy logo code24h.com làm background cho toàn trang

XEM DEMO

body{
    background: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png');
}

Hoặc:

body{
    background-image: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png');
}

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

Như ở ví dụ phần 2 bạn thấy background là logo và nó lặp nhiều lần, vậy làm thế nào không cho lặp background? Ta sẽ sử dụng thuộc tính background-repeat và thuộc tính này gồm các giá trị:

  • 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

Vẫn còn vài thuộc tính nữa nhưng thông thường chúng ta sử dụng 4 thuộc tính này là đủ rồi.

Ví dụ: Lấy logo code24h.com làm background và sử dụng thuộc tính background-repeat với các trường hợp sau

XEM DEMO

NoteTrong demo này chỉ có một trường hợp nên bạn có thể thay đổi thuộc tính và chạy lại để xem nhé.

no-repeat

body{
    background-image: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png');
    background-repeat: no-repeat;
}

repeat

body{
    background-image: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png');
    background-repeat: repeat;
}

repeat-x

body{
    background-image: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png');
    background-repeat: repeat-x;
}

repeat-y

body{
    background-image: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png');
    background-repeat: repeat-y;
}

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

Trường hợp bạn sử dụng background không lặp và bạn 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. Cấu trúc của nó là:

background-position: position1 position2

Trong đó position1 và position2 gồm các giá trị sau:

  • bottom: ở dưới
  • left: bên trái
  • right: bên phải
  • center: ở giữa
  • top: ở trên

Lưu ý: khi các bạn chọn giá trị thì phải chọn đúng chuẩn như: left bottom, left top, right top, .. chứ không thể chọn left right được vì nó không tuân theo hệ tọa độ đề cát.

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

XEM DEMO

body
{
    height: 300px;
    background-image: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png');
    background-repeat: no-repeat;
    background-position: center;
}
Ví dụ: Hiển thị background góc trái dưới

XEM DEMO

body
{
    height: 300px;
    background-image: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png');
    background-repeat: no-repeat;
    background-position: left bottom;
}

Thực tế thì thuộc tính backgroud-position là viết tắt của hai thuộc tính background-position-x và backgroud-position-y nên thay vì truyền hai tham số vào background-position thì bạn có thể sử dụng nó để thay thế.

5. Thiết lập background đứng im khi scroll (fixed background)

Nếu màn hình 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ì có thể sử dụng thuộc tính background-attachment. Thông thường chúng ta sử dụng hai thuộc tính:

  • fixed: sẽ đứng im
  • scroll: sẽ di chuyển theo khi kéo
Ví dụ: Cho background đứng im khi lăn chuột

XEM DEMO

body
{
    height: 1000px;
    background-image: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Trong ví dụ này mình thiết lập chiều cao là 1000px để có thanh cuộn.

6. Sử dụng thuộc tính background nâng cao

Nếu bạn cảm thấy các thông số thiết lập background quá dài thì có thể sử dụng thuộc tính background ở dạng ghi tắt.

Ví dụ: ghi tắt với background

XEM DEMO

body
{
    height: 1000px;
    background: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png') no-repeat bottom fixed;
}

7. Sử dụng selector và background

Các ví dụ trên mình toàn dùng cho thẻ body nhưng trong thực tết bạn có thể dùng nó cho bất kì thẻ nào bằng cách sử dụng selector trong css.

Ví dụ: thiết lập background cho thẻ h1
h1
{
    height: 1000px;
    background: url('https://code24h.com/upload/config/images/hoc-lap-trinh-online.png') no-repeat bottom fixed;
}
Ví dụ: Thiết lập background cho thẻ có id="demo"
#demo
{
    background: red;
}

Quá đơn giản phải không nào :D.

8. Lời kết

Trong bài này chủ yếu tìm hiểu các thuộc tính CSS xử lý background, nhưng vẫn còn nhiều thuộc tính nâng cao nữa nhưng ít khi sử dụng nên mình không trình bày nó trong bài này, bạn phải học từ từ mới thấm trong người được chứ vội quá quên hết. Chúc các ban học CSS vui vẻ :D

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

jQuery

Hàm jQuery Ví dụ Mô tả BỘ CHỌN (SELECTORS) $('*') $('*') Chọn tất cả các thành phần có trong văn bản HTML, khi sử dụng bộ chọn này có thể sẽ khiến quá trình xử lý của một số trình duyệt chậm lại. $(' tag ') $('div') Chọn thành phần theo từng tag cụ thể. $('tag. ...

Tag HTML5

Tag mới trong HTML5 Tag Mô tả Trạng thái <article> Định nghĩa một bài viết, một nội dung riêng biệt. <aside> Định nghĩa nội dung bên ngoài nội dung chính (thường là phần sidebar). <audio> Định nghĩa âm thanh, như nhạc hay trường audio khác.. ...

Tag HTML/XHTML

Tag HTML/XHTML DTD cho biết: thuộc tính HTML 4.01 / XHTML 1.0 DTD nào được cho phép. T=Transitional, S=Strict, và F=Frameset. Tag Mô tả HTML 4.01 XHTML 1.0 XHTML 1.1 Xác định một comment, một chú thích. TSF O <!DOCTYPE> Xác định mẫu cho văn bản HTML. TSF ...

Animation trong CSS

Animation là gì ? Animation (hay còn gọi là hiệu ứng) là tiến trình thay đổi hình dạng và tạo hiệu ứng di chuyển của các phần tử. CSS hỗ trợ rất nhiều hiệu ứng liên quan tới sự kiện chuyển động. Bảng dưới liệt kê tất cả các hiệu ứng bạn có thể sử dụng trong CSS. Để tìm hiểu chi tiết, ...

Chuyển đổi từ PX sang EM trong CSS

Chuyển đổi từ PX sang EM Như đã được trình bày trong chương Đơn vị trong CSS , một đơn vị được sử dụng cho chiều cao của font. Một đơn vị em tương đương với kích cỡ của một font đã cho, nếu bạn gán kích cỡ của font là 12px thì mỗi đơn vị em sẽ là 12px, do đó 2em sẽ là 24px. Do đó, trong ...

Web Safe Font trong CSS

Tổ hợp Font trong CSS CSS3 tương thích với công nghệ tổ hợp Font. Tức là, nếu trình duyệt không hỗ trợ Font đầu tiên, thì nó sẽ cố gắng thử các Font tiếp theo. Serif Font trong CSS Font family Normal bold Georgia, serif Cau van nay duoi dang Normal Text. Cau van nay ...

User Interface trong CSS | Giao diện người dùng trong CSS

Thuộc tính user interface trong CSS cho phép bạn thay đổi bất kỳ phần tử nào vào một trong các phần tử user interface chuẩn. Bảng dưới liệt kê một số thuộc tính thường được sử dụng trong User Interface trong CSS3: Giá trị Miêu tả appearance Cho phép người dùng làm cho các phần tử ...

Chia cột trong CSS

CSS3 hỗ trợ tính năng Multi Column giúp bạn sắp xếp văn bản dưới dạng cấu trúc một bài báo. Bảng dưới liệt kê một số thuộc tính Multi Column thường được sử dụng trong CSS3: Giá trị Miêu tả column-count Được sử dụng để đếm số cột mà phần tử nên được phân chia thành column-fill ...

Tổng hợp các màu trong CSS

Bảng dưới đây liệt kê 16 tên cùng mã màu (mã Hex code) đã được giới thiệu trong HTML 3.2. Bạn cũng có thể sử dụng các màu này trong CSS. Tên màu Giá trị Hex Code Màu aqua #00ffff black #000000 blue #0000ff fuchsia #ff00ff green #008000 ...

Responsive trong CSS | Responsive CSS là gì

Responsive CSS là gì ? Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ: nếu giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px ...