Hình nền có thể lớn hơn div không?

Tôi có một div chân trang với 100% chiều rộng. Nó cao khoảng 50px, tùy thuộc vào nội dung của nó.

Có thể cung cấp cho #footer đó một hình nền kiểu tràn div này không?

Hình ảnh có kích thước khoảng 800x600px và tôi muốn nó được đặt ở góc dưới bên trái của chân trang. Nó sẽ hoạt động giống như một hình nền cho trang web của tôi, nhưng tôi đã đặt một hình nền trên cơ thể của mình. Tôi cần một hình ảnh khác được đặt ở góc dưới cùng bên trái của trang web và div #footer sẽ hoàn hảo cho điều đó.

#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
    background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}

Hình ảnh được đặt ở chân trang, tuy nhiên nó không làm tràn div. Có thể làm cho điều đó xảy ra?

overflow:visible không làm công việc!

Tôi không tin rằng bạn có thể làm cho hình nền tràn div của nó. Hình ảnh được đặt trong thẻ Hình ảnh có thể làm tràn div cha của chúng, nhưng hình nền bị giới hạn bởi div mà chúng làm nền.

Có một thủ thuật rất dễ dàng. Đặt phần đệm của div đó thành một số dương và lề thành phủ định

#wrapper {
     background: url(xxx.jpeg);
     padding-left: 10px;
     margin-left: -10px;
}

Bạn có thể sử dụng phần tử psuedo css3 ( :beforevà / hoặc :after) như được hiển thị trong bài viết này

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

Chúc may mắn...

Không, bạn không thể.

Nhưng như một giải pháp ổn định, tôi khuyên bạn nên phân loại div đầu tiên đó thành position:relativevà sử dụng div::befoređể tạo phần tử cơ bản chứa hình ảnh của bạn. Được phân loại vì position:absolutebạn có thể di chuyển nó đến bất cứ đâu liên quan đến div ban đầu của bạn.

Đừng quên thêm nội dung vào phần tử mới đó. Đây là một số ví dụ:

div {
  position: relative;
}    

div::before {
  content: ""; /* empty but necessary */
  position: absolute;
  background: ...
}

Lưu ý: nếu bạn muốn nó nằm 'trên cùng' của div mẹ, hãy sử dụng div::afterthay thế.

Sử dụng bìa kích thước nền phù hợp với tôi.

#footer {
    background-color: #eee;
    background-image: url(images/bodybgbottomleft.png);
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
}

Rõ ràng là đã biết về các vấn đề hỗ trợ, hãy kiểm tra Tôi có thể sử dụng không: http://caniuse.com/#search=background-size

Bạn đề cập đến việc đã bật hình nền body.

Bạn có thể bật hình nền đó và bật hình nền htmlmới body. Điều này tất nhiên sẽ phụ thuộc vào bố cục của bạn, nhưng bạn không cần phải sử dụng footer cho nó.

Sử dụng thuộc tính trasform: scale (1.1) để làm cho hình ảnh bg lớn hơn, di chuyển nó lên với vị trí: tương đối; đầu trang: -10px;

<div class="home-hero">
    <div class="home-hero__img"></div>
</div>

.home-hero__img{
 position:relative;
    top:-10px;
    transform: scale(1.1);
    background: {
        size: contain;
        image: url('image.svg');
    }
}

Không hẳn - hình nền bị giới hạn bởi phần tử mà nó được áp dụng và các thuộc tính tràn chỉ áp dụng cho nội dung (tức là phần đánh dấu) trong phần tử.

Tuy nhiên, bạn có thể thêm một div khác vào div chân trang của mình và áp dụng hình nền vào đó, và thay vào đó, có phần tràn đó.

Điều này có thể giúp ích . Nó yêu cầu chiều cao chân trang là một số cố định. Về cơ bản, bạn có một div bên trong div chân trang với nội dung bình thường, với position: absolutevà sau đó là hình ảnh có position: relativeâm z-indexđể nó ở "bên dưới" mọi thứ và topgiá trị âm của chiều cao của chân trang trừ đi chiều cao của hình ảnh (trong ví dụ của tôi, 50px - 600px = -550px). Đã thử nghiệm trong Chrome 8, FireFox 3.6 và IE 9.