CUNGHOCWEB 830

Bài 4: Thiết lập nền với CSS background

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

  1. background
  2. background-color
  3. background-image
  4. background-repeat
  5. background-attachment
  6. background-position

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

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.

body{
    background: red;
}

hoặc:

body{
    background: #fb0320;
}

hoặc:

body{
    background-color: #fb0320;
}

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

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

body{
    background: url('./hoc-lap-trinh-online.png');
}

hoặc:

body{
    background-image: url('./hoc-lap-trinh-online.png');
}

3. Tùy chọn hiển thị background

Ví dụ bên dưới tạo background không lặp:

body{
    background-image: url('./hoc-lap-trinh-online.png');
    background-repeat: no-repeat;
}

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 dọc

Ta có thể thay no-repeat thành repeat, repear-x hoặc repeat-y. Ngoài cách viết trên ta có thể gom thành:

body{
    background: url('./hoc-lap-trinh-online.png') no-repeat;
}

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

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 độ.

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

body
{
    height: 300px;
    background-image: url('./hoc-lap-trinh-online.png');
    background-repeat: no-repeat;
    background-position: center;
}

Ví dụ: Hiển thị background góc trái dưới

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

Ngoài ra bạn cũng có thể gom gọn lại thành:

body
{
    background-image: url('./hoc-lap-trinh-online.png') no-repeat;
    background-position: left bottom;
}

Mở rộng: Nếu bạn muốn background đứng im khi scroll chuột, thêm vào sau thuộc tính fixed.

body
{
    background-image: url('./hoc-lap-trinh-online.png') no-repeat fixed;
    background-position: left bottom;
}
Chia sẻ bài viết
Nội dung

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon