CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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 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 freetuts.net 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:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
  • 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 freetuts.net làm background cho toàn trang

XEM DEMO

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

Hoặc:

body{
    background-image: url('https://freetuts.net/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 freetuts.net 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://freetuts.net/upload/config/images/hoc-lap-trinh-online.png');
    background-repeat: no-repeat;
}

repeat

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

repeat-x

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

repeat-y

body{
    background-image: url('https://freetuts.net/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://freetuts.net/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://freetuts.net/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-xbackgroud-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://freetuts.net/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://freetuts.net/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://freetuts.net/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

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top