5/5 - (8 bình chọn)

Cách đặt ảnh làm hình nền trong HTML

Hôm nay Tinh Hoa Công Nghệ sẽ hướng dẫn cho mọi người cách để đặt ảnh nền cho web html nha.

Trước tiên mọi người mở trình chạy code lên. Sau đó hãy thêm thẻ <html></html và thẻ <head></head> phần đầu. Bên tron thẻ <head></head> mọi người hãy thêm thẻ <style></style> sau đó hãy thêm những dòng code như trong ảnh nha.

Và đầy đủ của nó sẽ có như này


<!DOCTYPE html>
<html>
    <head>
       <style>
body{
    background-image: url(https://gstatic.gvn360.com/2020/12/final.jpg);
    background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
        </style>
    </head>
</html>

Mình sẽ nói qua chút về mấy cái code nhé.

  • background-image: url( );

-Bạn hãy thêm địa chỉ hình ảnh mà bạn muốn đặt làm hình nền vào bên trong ngoặc

  • background-repeat: no-repeat;

-Nếu hình ảnh của bạn nhỏ hơn phần tử thì ảnh của bạn sẽ bị lặp đi lặp lại theo hàng ngang và dọc cho tới hết trang. Để tránh trường hợp lặp lại ảnh thì hãy thêm vào

background-repeat: no-repeat;

  • background-attachmet: fixed;

Để đảm bảo toàn bộ phần tử luôn được bao phủ, hãy đặt thuộc tính background-attachment: fixed;

  • background-size : 100% 100%

Nó sẽ giúp hình ảnh của bạn bao phủ để vừa với toàn bộ phần tử. Bạn có thể thử thay đổi kích thước cửa sổ trình duyệt, và bạn sẽ thấy rằng hình ảnh sẽ kéo dài, nhưng luôn bao phủ toàn bộ phần tử.