[CSS] Sử dụng images trong background

Khi thêm hình ảnh vào thiết kế của bạn, đặc biệt nếu nó đáp ứng được reponsive

, thì hãy sử dụng thẻ với thuộc tính background trong css thay vì sử dụng element <img> trong html

Điều này có vẻ như không có tác dụng gì nhiều, nhưng nó thực sự làm cho việc style hình ảnh trở nên dễ dàng hơn, giữ kích thước và tỷ lệ khung hình ban đầu của chúng, nhờ vào background-size, background-position và các thuộc tính khác. Xem ví dụ dưới đây

<section>
    <p>Img element</p>
    <img src="images/bicycle.jpg" alt="bicycle">
</section>

<section>
    <p>Div with background image</p>
    <div></div>
</section>

img {
    width: 300px;
    height: 200px;
}

div {
    width: 300px;
    height: 200px;
    background: url('images/bicycle.jpg');
    background-position: center center;
    background-size: cover;
}

section{
    float: left;
    margin: 15px;
}

và kết quả chúng ta thu được như hình ảnh dưới đây:

• Một nhược điểm của kỹ thuật này là khả năng truy cập web của trang của bạn sẽ bị ảnh hưởng nhẹ, vì hình ảnh sẽ không được thu thập dữ liệu chính xác bởi trình đọc màn hình và công cụ tìm kiếm. Vấn đề này có thể được giải quyết bởi đối tượng tuyệt vời object-fit nhưng nó chưa hỗ trợ được trên toàn bộ các trình duyệt.