Đại lý vé máy bay giá rẻ nhất cả nước Nương Huỳnh
Cách thiết lập màu nền, hình nền trong CSS

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 Tradevn.tech 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-color để 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 background sau:

  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
Lưu ý: Vì vấn đề khó khăn trong việc Demo nên mình sẽ viết dạng internal để các bạn dễ quan sát. Xem các cách viết Internal trong CSS.

Thiết lập màu nền trong CSS

Để thiết lập màu nền 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 ví dụ #fff, #000. 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 màu nền như Tradevn.tech là màu xám #e5e5e5, thì chúng ta sẽ thiết lập background ở thẻ body là được.

body{
    background: #e5e5e5 ;
}

Hoặc:

body{
    background-color: #e5e5e5 ;
}

Ví dụ:

<div style="background: #ffffcc; height: 100px; width: 100%; text-align: center; padding: 32px 32px;">Đây là một ví dụ cụ thể</div>

Kết quả:

Đây là một ví dụ cụ thể

Thiết lập hình nền trong CSS

Thiết lập hình nền thì ta sử dụng thuộc tính background hoặc background-image với tham số truyền vào là URL của hình ảnh. Ví dụ lấy hình ảnh bất kỳ làm Background cho thẻ <div>, bên dưới là ví dụ CODE HTML:

<div style="background-image: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
border: 1px dashed #a6ce39;">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.

 

Hoặc chúng ta cũng có thể Code:

<div style="background: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
border: 1px dashed #a6ce39;">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Cho phép lặp hoặc không lặp lại hình nền

Như ở ví dụ trên bạn thấy hình nền được lặp nhiều lần, vậy làm sao để nó không lặp lại? 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ụ hình nền không lặp lại:

<div style="background: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
background-repeat: no-repeat;
border: 1px dashed #a6ce39;">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.

 

Ví dụ hình nền lặp lại:

<div style="background: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
background-repeat: repeat;
border: 1px dashed #a6ce39;">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.

 

Ví dụ hình nền lặp lại theo chiều ngang:

<div style="background: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
background-repeat: repeat-x;
border: 1px dashed #a6ce39;">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.

 

Ví dụ hình nền lặp lại theo chiều đứng:

<div style="background: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
background-repeat: repeat-y;
border: 1px dashed #a6ce39;">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

 
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá

 

Thiết lập vị trí hiển thị cho hình nền

Trường hợp bạn sử dụng background không lặp và bạn muốn nó 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. Một số giá trị của nó là:

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

Ví dụ hiển thị hình nền ở giữa:

<div style="background: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
background-repeat: repeat-y; 
background-position: center; 
border: 1px dashed #a6ce39;">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.

 

Ví dụ hiển thị hình nền góc dưới phía trái:

<div style="background: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
background-repeat: no-repeat; 
background-position: left bottom; 
border: 1px dashed #a6ce39;">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.

 

Ví dụ hiển thị hình nền góc trên phía phải:

<div style="background: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
background-repeat: no-repeat; 
background-position: top right; 
border: 1px dashed #a6ce39;">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.

 

Thiết lập cho hình nền đứng im khi cuộc chuột

Nếu màn hình dài quá thì khi bạn lăn chuột thì hình nền 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
<div style="
height: 500px; 
background-image: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
border: 1px dashed #a6ce39;
background-repeat: repeat;
background-attachment: fixed;">

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.

Hình nền bao phủr

Nếu bạn muốn hình nền bao phủ toàn bộ phần tử, bạn có thể đặt thuộc tính background-size thành cover. Ngoài ra, để đảm bảo toàn bộ phần tử luôn được bao phủ, hãy đặt thuộc tính background-attachment thành fixed. Bằng cách này, hình nền sẽ bao phủ toàn bộ phần tử mà không bị kéo giãn, hình ảnh sẽ giữ nguyên tỷ lệ ban đầu.

Ví dụ:

<div style="background-image: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
border: 1px dashed #a6ce39; 
background-repeat: no-repeat; 
background-attachment: fixed;   
background-size: cover; ">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.

Hình nền căng

Nếu bạn muốn hình nền kéo dài để vừa với toàn bộ phần tử, bạn có thể đặt thuộc tính background-size thành 100% 100%:

Ví dụ:

<div style="background-image: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
border: 1px dashed #a6ce39; 
background-repeat: no-repeat; 
background-attachment: fixed;   
background-size: 100% 100%; ">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết quả:

Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.

Sử dụng thuộc tính hình nền nâng cao

Nếu bạn cảm thấy các thông số thiết lập hình nền quá dài thì có thể sử dụng thuộc tính background ở dạng ghi tắt ở dạng no-repeat;,
fixed; ,cover;

<div style=" background-image: url('https://tech.tradevn.net/wp-content/uploads/2021/07/background-demo-tradevntech.svg'); 
border: 1px dashed #a6ce39; no-repeat; fixed;">
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
Hình nền đẹp quá.
</div>

Kết luận

Trong bài này chủ yếu tìm hiểu các thuộc tính CSS xử lý hình nền, 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ẻ.


Đại lý vé máy bay giá rẻ nhất cả nước Nương Huỳnh

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!


avatar
  Nhận thông tin qua email  
Nhận thông báo cho