Làm cách nào để kéo dài hình nền để che toàn bộ phần tử HTML?

Tôi đang cố gắng lấy hình nền của một phần tử HTML (body, div, v.v.) để kéo dài toàn bộ chiều rộng và chiều cao của nó.

Không gặp nhiều may mắn. Nó thậm chí có thể hay tôi phải làm theo cách khác ngoài việc nó là một hình nền?

Css hiện tại của tôi là:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Cảm ơn trước.

Chỉnh sửa: Tôi không quan tâm đến việc duy trì CSS theo gợi ý của Gabriel nên thay vào đó tôi đang thay đổi bố cục của trang. Nhưng đó có vẻ là câu trả lời tốt nhất nên tôi đánh dấu nó như vậy.

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

Sử dụng thuộc background-sizetính: http://www.w3.org/TR/css3-background/#the-background-size

Trong ngắn hạn, bạn có thể thử này ....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Nơi tôi đã sử dụng ít css và js ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

Và nó đang hoạt động tốt đối với tôi.

Không chắc chắn rằng có thể kéo dài hình nền. Nếu bạn thấy rằng điều đó không thể thực hiện được hoặc không đáng tin cậy trong tất cả các trình duyệt mục tiêu của mình, bạn có thể thử sử dụng thẻ img kéo dài với z-index được đặt thấp hơn và vị trí được đặt thành tuyệt đối để nội dung khác xuất hiện trên đó.

Hãy cho chúng tôi biết bạn rốt cuộc đang làm gì.

Chỉnh sửa: Những gì tôi đề xuất về cơ bản là những gì trong liên kết của gabriel. Vì vậy, hãy thử mà :)

Để mở rộng câu trả lời @PhiLho, bạn có thể căn giữa một hình ảnh rất lớn (hoặc bất kỳ hình ảnh kích thước nào) trên một trang có:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Hoặc bạn có thể sử dụng một hình ảnh nhỏ hơn với màu nền phù hợp với màu nền của hình ảnh (nếu đó là một màu đồng nhất). Điều này có thể phù hợp với mục đích của bạn hoặc không.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Nếu bạn cần kéo dài hình nền của mình trong khi thay đổi kích thước màn hình và bạn không cần khả năng tương thích với các phiên bản trình duyệt cũ hơn, điều này sẽ thực hiện công việc:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Nếu bạn có một hình ảnh ngang lớn, ví dụ này ở đây thay đổi kích thước nền ở chế độ dọc, để nó hiển thị ở trên cùng, để trống ở dưới cùng:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

Đoạn mã sau đây tôi chủ yếu sử dụng để đạt được hiệu quả được yêu cầu:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Bạn không thể trong CSS thuần túy. Có một hình ảnh bao phủ toàn bộ trang đằng sau tất cả các thành phần khác có lẽ là cách tốt nhất của bạn (có vẻ như đó là giải pháp được đưa ra ở trên). Dù sao, rất có thể nó sẽ trông rất kinh khủng. Tôi sẽ thử một hình ảnh đủ lớn để bao phủ hầu hết các độ phân giải màn hình (giả sử lên đến 1600x1200, trên đó là hiếm hơn), để giới hạn chiều rộng của trang hoặc chỉ để sử dụng một hình ảnh xếp.

hình ảnh {

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 

Chỉ cần tạo một div là con trực tiếp của body (với tên lớp là bg chẳng hạn), bao gồm tất cả các phần tử khác trong body và thêm phần tử này vào tệp CSS:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Tham khảo liên kết này: https://www.w3schools.com/css/css_rwd_images.asp Cuộn xuống phần có nội dung:

2. Nếu thuộc tính kích thước nền được đặt thành "100% 100%", hình ảnh nền sẽ kéo dài để bao phủ toàn bộ khu vực nội dung

Ở đó, nó hiển thị 'img_flowers.jpg' trải dài theo kích thước của màn hình hoặc trình duyệt bất kể bạn thay đổi kích thước như thế nào.

Nó phù hợp với tôi

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}