Cách làm hình nền full màn hình trong CSS

Để 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.

• Author
• Recent Posts

Trần Thành

Tôi là nhà sáng lập Kênh Tin Học - Một người luôn có niềm đam mê với mọi thứ liên quan đến công nghệ và đổi mới.

Latest posts by Trần Thành (see all)

• Pan HP folio 9470p kích lúc lên lúc không - 15/03/2024
• Dell 3421 không kích được nguồn - 14/03/2024
• Chia sẻ pan mất nguồn đầu vào trên Lenovo S410 - 13/03/2024