Чи може фонове зображення бути більше самого div?

У мене є колонтитул div зі 100% шириною. Висота - близько 50 пікселів, залежно від його вмісту.

Чи можна надати #footer фонове зображення, яке переповнює цей div?

Зображення становить приблизно 800x600px, і я хочу, щоб воно було розташоване в лівому нижньому куті нижнього колонтитула. Це має працювати як фонове зображення для мого веб-сайту, але я вже встановив фонове зображення на своєму тілі. Мені потрібне інше зображення, розташоване в лівому нижньому куті мого веб-сайту, і div #footer для цього ідеально підійде.

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

Зображення встановлено в нижній колонтитул, однак воно не переповнює div. Чи можливо це здійснити?

overflow:visible не робить роботу!

Я не вірю, що ви можете зробити фонове зображення переповненим його div. Зображення, розміщені в тегах Image, можуть переповнювати батьківський div, але фонові зображення обмежуються div, для якого вони є фоном.

Є дуже легкий фокус. Встановіть відступ цього div на додатне число, а поле - на negativ

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

Ви можете використовувати елемент css3 psuedo ( :beforeта / або:after ), як показано в цій статті

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

Щасти...

Ні, ти не можеш.

Але як надійне обхідне рішення, я б запропонував класифікувати цей перший div як position:relativeі використовувати div::beforeдля створення основного елемента, що містить ваше зображення. Класифікується як position:absoluteви можете перемістити його куди завгодно відносно початкового div.

Не забудьте додати вміст до цього нового елемента. Ось приклад:

div {
  position: relative;
}    

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

Примітка: якщо ви хочете, щоб він був "поверх" батьківського div, використовуйте div::afterзамість нього.

Використання обкладинки з розміром фону працювало для мене.

#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;
}

Очевидно, знайте про проблеми з підтримкою, перевірте Чи можу я використовувати: http://caniuse.com/#search=background-size

Ви згадуєте, що вже маєте фонове зображення body.

Ви можете встановити це фонове зображення html, а нове - на body. Це, звичайно, буде залежати від вашого макета, але вам не потрібно буде використовувати для цього свій нижній колонтитул.

Використовуйте властивість trasform: scale (1.1), щоб збільшити зображення bg, перемістіть його вгору з позицією: relative; зверху: -10 пікселів;

<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');
    }
}

Не зовсім так - фонове зображення обмежене елементом, до якого він застосований, а властивості переповнення застосовуються лише до вмісту (тобто розмітки) всередині елемента.

Ви можете додати інший div у свій нижній колонтитул і застосувати до цього фонове зображення, і замість цього мати це переповнення.

Це може допомогти . Для цього потрібно, щоб висота нижнього колонтитула була фіксованою. В основному, у вас є div у колонтитулі div з його нормальним вмістом, з position: absolute, а потім зображення з position: relative, мінус, z-indexтак що воно залишається "нижче" всього, і негативне topзначення висоти нижнього колонтитула мінус висота зображення (у моєму прикладі, 50px - 600px = -550px). Перевірено в Chrome 8, FireFox 3.6 та IE 9.