Thuộc tính Background trong CSS

Background là một trong những thuộc tính cần thiết trong CSS. Nó dùng để trang trí và tạo nền giúp trang web sống động bắt mắt hơn. Bài viết này sẽ giúp bạn tìm hiểu về thuộc tính Background trong CSS đầy đủ nhất.

Các thuộc tính lan rộng ra của Background :

background-color: Thiết lập màu nền cho trang web
background-image: Thiết lập hình nền cho trang web
background-repeat: Sự lặp lại của hình nền
background-attachment: Thiết lập vị trí cố định cho hình nền
background-position: Thiết lập vị trí cho hình nền

Các thuộc tính Background CSS

Đầu tiên bạn sẽ chạy đoạn mã sau đây :

Đây là ví dụ thuộc tính background

Background-color:

Thuộc tính background color trong CSS giúp bạn thiết lập màu nền thuận tiện. Giá trị sắc tố sẽ được viết theo 3 kiểu :– Tên màu như Red, Green, Blue …– Mã màu Hex như # FFFFFF, # 345345 …– Giá trị RGB như rgb ( 105,105,105 ), rgb ( 178,34,34 ) …Bãn sẽ thay thế sửa chữa những giá trị vào dòng chữ màu đỏ ở đoạn ví dụ trên để xem tác dụng nhé !

Background-image:

Background image dùng để lấy một hình ảnh nào đó là hình nền cho website. Cũng ví dụ trên bạn thay dòng màu đỏ bằng

background-image:url(http://wp.ftn61.com/wp-content/uploads/2020/02/css-background.png);

Background-repeat:

Background repeat dùng để lặp lại hình nền theo chiều ngay hoặc chiều dọc .Ví dụ :background-repeat : repeat ;Với code này nó sẽ tự động hóa lặp vô hạn có nghĩa là lặp hàng ngang trước sau khi hết dòng nó lại liên tục lặp dòng tiếp theo .Để lặp chiều ngang dùng :background-repeat : repeat-x ;Để lặp chiều dọc dùng :background-repeat : repeat-y ;Cũng ví dụ trên bạn thay đoạn CSS như sau :

background-image:url(http://wp.ftn61.com/wp-content/uploads/2020/02/css-background.png);
background-repeat: repeat;
background-size: 200px;

Background-position

Background position dùng để thiết lập vị trí cho hình nền bạn có thể đặt nó bên trái, bên phải hay bên trên xuống dưới tuỳ ý.

Cú pháp : background-position : top | right | bottom | left ;Ví dụ :

body {
background-image:url(http://wp.ftn61.com/wp-content/uploads/2020/02/css-background.png);
background-repeat: no-repeat;
background-size: 300px;
Background-position: top right;
}

p {
color: red;
}

Background-attachment:

Background attachment giúp thiết lập một vị trí cố định và thắt chặt cho hình nền khi bạn dùng thanh trượt trang web xuống dưới thì hình nền vẫn nằm yên một chỗ .Ví dụ :

body {
height: 1000px;
background-image:url(http://wp.ftn61.com/wp-content/uploads/2020/02/css-background.png);
background-repeat: no-repeat;
background-size: 300px;
Background-position: top right;
Background-attachment: fixed;
}

p {
color: red;
}

Background-size:

Background size trong CSS sẽ giúp bạn thiết lập chiều cao và rộng của hình nền .Cú pháp :background-size : auto | length | cover | contain | initial | inherit ;Giải thích :

auto:  co giãn tự động

cover: bao phủ toàn bộ. Thường dùng làm background full màn hình HTML

contain: co hình nền theo chiều rộng còn chiều cao sẽ tỉ lệ theo chiều rộng

inherit: thừa hưởng tính chất từ phần tử cha

Hoặc :background-size : 75 % 50 % ;Hoặc :background-size : 300 px 100 px ;

Ví dụ:

body {
height: 1000px;
background-image:url(http://wp.ftn61.com/wp-content/uploads/2020/02/css-background.png);
background-repeat: no-repeat;
background-size: 300px 100px;
}

p {
color: red;
}

Cách viết rút gọn thuộc tính Background

Viết gọn hay gộp những thuộc tính lại sẽ có lợi về vận tốc khi load website. Dưới đây là cách rút gọn code đơn thuần :

background: #eeeeee url(http://wp.ftn61.com/wp-content/uploads/2020/02/css-background.png) no-repeat top right;

Trên đây là những thuộc tính Background trong CSS quen thuộc thường được sử dụng. Để tạo trang web đẹp chắc như đinh bạn không hề bỏ lỡ những thuộc tính này .

Source: http://wp.ftn61.com
Category: Tin Tức