Bài 4: CSS Backgrounds

Bài 3: CSS – Colors
Bài 5: CSS – Border

Thuộc tính CSS background được sử dụng để định nghĩa hiệu ứng background cho elements.

Các thuộc tính CSS background:

  • Background-color
  • Background-image
  • Background-repeat
  • Background-attachment
  • Background-position

 

Background color

Thuộc tính background-color xác định màu nền cho element

EX:

<!DOCTYPE html>

<html>

<head>

<style>

body {

    background-color: lightblue;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>

</html>

background-color

Với CSS, một màu thường được xác định như sau:

  • Một giá trị tên – giống như “red”
  • Một giá trị HEX – giống như “#ff0000”
  • Một giá trị RGB – giống như “rgb(255,0,0)”

Bạn có thể tham khảo bài Colors để biết thêm nhiều về màu CSS.

Trong ví dụ dưới đây, thẻ <h1>, <p> và <div> sẽ có background color khác nhau:

EX:

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

 

Background Image

Thuộc tính background-image xác định một hình ảnh làm background cho một element.

Mặc định thì hình ảnh sẽ được lặp lại vì thế nó bao phủ toàn bộ element.

EX:

<!DOCTYPE html>

<html>

<head>

<style>

body {

    background-image: url(“paper.gif”);

}

</style>

</head>

<body>

 

<h1>Hello World!</h1>

 

<p>This page has an image as the background!</p>

 

</body>

</html>

background-image

Lưu ý: khi sử dụng hình ảnh làm background, thì bạn nên sử dụng hình ảnh mà nó không gây ảnh hưởng lên các văn bản. Nếu không nó đè hoặc làm mờ chữ, nội dung web của bạn.

 

Background Image – Lặp Dọc hoặc Ngang

Mặc định thì thuộc tính background-image sẽ lặp ảnh cả 2 dạng dọc và ngang (horizontally and vertically).

Một số ảnh nên được lặp ngang hoặc dọc, nếu không thì trông nó rất là dị, giống như sau:

<!DOCTYPE html>

<html>

<head>

<style>

body {

    background-image: url(“gradient_bg.png”);

}

</style>

</head>

<body>

 

<h1>Hello World!</h1>

<p>Strange background image…</p>

 

</body>

</html>

background-image-horizon

Nếu như ảnh trên chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;), thì sẽ trông tốt hơn:

body {
    background-image: url(“gradient_bg.png”);
    background-repeat: repeat-x;
}

background-image-horizon_repeat

Lưu ý: Để lặp lại một image theo chiều dọc (vertically), chúng ta set background-repeat: repeat-y;

Background Image – Set position và no-repeat

EX: no-repeat

body {
    background-image: url(“img_tree.png”);
    background-repeat: no-repeat;
}

background-image-no-repeat

Trong ví dụ trên background image hiển thị cùng nơi với text. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không che khuất text quá nhiều.

Vị trí của hình ảnh được xác định với thuộc tính background-position:

body {
    background-image: url(“img_tree.png”);
    background-repeat: no-repeat;
    background-position: right top;
}

background-image-no-repeat-position

Background Image – Fixed position

Để chỉ định background image sẽ cố định (tức là nó sẽ không bị di chuyển mất khi cuộn), sử dụng thuộc tính background-attachment:

body {
    background-image: url(“img_tree.png”);
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

background-image-no-repeat-position-fixed_1

background-image-no-repeat-position-fixed_2

 

Background – Shorthand

Để rút ngắn code, bạn có thể chỉ định tất cả các thuộc tính background trên cùng một dòng duy nhất. cái này được gọi là thuộc tính shorthand.

EX:

body {
    background: #ffffff url(“img_tree.png”) no-repeat right top;
}

Khi sử dụng thuộc tính shorthand thì thứ tự giá trị thuộc tính sẽ là :

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

Nếu yêu cầu của bạn không cần sử dụng hết thuộc tính này trong shorthand, thì chẳng quan trọng, bạn chỉ việc không đưa nó vào miễn sao vẩn bám theo thứ tự như trên là được.

 

Bài 3: CSS – Colors
Bài 5: CSS – Border

Comments

Ý Kiến Của Bạn

Your email address will not be published. Required fields are marked *