Cách làm hình nền full màn hình trong CSS – Blog Kênh Tin Học

Posted on by mtoplistChuyên mục:Top List

Để làm hình nền full màn hình bạn chỉ cần đặt hình sau đó đặt chiều rộng và cao 100% là được. Nếu đặt hình nền ở một phần tử con mà vẫn muốn nó full màn hình thì cũng vậy, đặt chiều rộng và cao 100% ở phần tử con đó là được.

Ví dụ ở đây mình đặt hình nền cho menu, nhưng vẫn muốn nó full màn hình, thì làm như sau:

Bước 1:

Đặt hình nền cho class menu.

– Đặt thuộc tính background-image và gán giá trị là url(link hình).

– Để hình tự co giãn bằng kích thước màn hình, bạn đặt thêm thuộc tính background-size và gán giá trị là cover.


.menu {
    background-image: url(hinh.jpg);
    background-size: cover;
}

Bước 2:

Đặt kích thước 100%.

– Đặt chiều cao cho class menu là 100%, lấy theo class cha.

– Class cha cha của menu là body, mình cũng đặt 100%, lấy theo class cha.

– Class cha của body là html, mình cũng đặt 100%, nó sẽ lấy 100% của màn hình (màn hình lớn nhỏ gì cũng vậy).

Ghi chú: Ở đây mình không đặt kích thước chiều rộng là vì mặc định nó là 100% rồi.

– Vì vẫn còn 2 lề trắng bên trái và phải, nên ở class body mình đặt margin là 0 cho nó mất luôn.

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

.menu {
    height: 100%;
    background-image: url(hinh.jpg);
    background-size: cover;
}

Ghi chú: Nếu vẫn còn lề trắng ở một bên nào đó, thì bạn tìm xem nó nằm ở class nào rồi đặt margin là 0 cho nó là được.

 

mtoplist