Thuộc tính background là một trong các thuộc tính khá phổ biến của CSS nhưng những thuộc tính vf chức năng của nó thì không phải ai cũng sử dụng hết . Trong bài này mình sẽ cùng các bạn tìm hiểu về  background trong CSS và cách sử dụng .

Trước tiên, các bạn cần biết background là 1 tập các thuộc tính trong css sử dụng để định dạng nền cho website

 

Và sẽ có 5 thuộc tính của background như sau :

  • background-color : Đặt thuộc tính màu nền
  • background-image : Dùng ảnh làm màu nền cho một element
  • background-position : Ví trí của ảnh
  • background-repeat : Tùy chỉnh ảnh nền có lặp hay không, lặp kiểu nào…
  • background-attachment : Đặt chế đố ảnh nền scroll theo trang hoặc là ở vị trí cố định

 

Bây giờ chúng ta cùng tìm hiểu cách sử dụng của 5 thuộc tính này :

 

1. Background-color:

     Là thuộc tính sử dụng để định dạng màu nền cho website

     + Màu theo tên tiếng anh: red, green, blue, white, black,..

     + Là mã màu theo hệ hex các bạn có thể tham khảo tại đây :  Bảng mã màu CSS

 

Các bạn có thể sử dụng 1 trong 4 cách sau 

    background-color: #006600;
    background-color: green;
    background-color: rgb(0, 102, 0);
    background-color: transparent;

Ví dụ :

      div{
         background-color: red;
          }
       Hoặc background-color: #228654;

 

2. Background-image

     Là thuộc tính định ảnh nền cho website .bạn có thể dùng một ảnh bất kỳ trên internet hoặc cùng server để làm nền cho một element

background-image: url(http://itshare24h.com/themes/vannyneo3/images/logo.png);
Hoặc
background-image: url(../images/logo.png);

Ví dụ:
div{
     background-image: url(‘images/itshare24h.png’);
    }

 

3. Background-repeat

– Xác định việc lặp lại của ảnh nền trong trường hợp ảnh nền nhỏ hơn kích thước phần định
dạng
– Giá trị: 

   background-repeat: repeat;  /* Lặp theo 2 chiều ngang và dọc - Giá trị mặc định */
   background-repeat: repeat-y; /* Chỉ lặp theo chiều dọc */
   background-repeat: repeat-x; /* Chỉ lặp theo chiều ngang */
   background-repeat: no-repeat; /* Không lặp */

Ví dụ 

  body {
   background-image:url(logo.png);
   background-repeat:no-repeat;
  }
 
4. Background-attachment
 
Có lẽ bạn ít thấy đoạn mã CSS này, chúng ta chỉ cần khai báo khi bạn muốn giữ nguyên ảnh nền khi di chuyển thanh cuộn.
 
Background-attachment  là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:
    + scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
    + fixed: Cố  định  ảnh nền so với nội dung trang web. Khi  áp dụng giá trị  này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.
 
Ví dụ 
     div{
    background-image: url(../images/logo.png); 
    background-repeat: repeat-x;
    background-attachment: fixed;
 }


5. Background-position

Theo mặc định ảnh nền khi được chèn sẽ nằm ở  góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian của thành phần mà nó làm nền).


– Thuộc tính Background-position sẽ dùng một cặp 2 giá trị để  biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. 


– Đơn vị  chính xác như : centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right.  

– Giá trị:
    + Left: Bắt đầu từ bên trái
    + Right: Bắt đầu từ bên phải
    + Top: Bắt đầu từ trên.
    + Bottom: Bắt đầu từ dưới
    + Có thể dùng đơn vị % để định vị trí.

 

Ta có ví dụ sau :

 Giá trị  Ý nghĩa
 Background-position:5cm 2cm  Ảnh được định vị  5cm từ  trái qua và 
2cm từ trên xuống.
 Background-position:20% 30%  Ảnh được định vị  20% từ  trái qua và 
30% từ trên xuống.
 Background-position:bottom left  Ảnh được định vị ở góc trái phía dưới

 

Ví dụ :

div{

   background-image: url(bg.gif);
   background-repeat: repeat-x;
   background-attachment: fixed;

}

ĐỂ LẠI PHẢN HỒI CỦA BẠN TẠI ĐÂY

Phản hồi về bài viết này

NO COMMENTS

LEAVE A REPLY


*