Может ли фоновое изображение быть больше самого div?

Question

У меня есть div нижнего колонтитула с шириной 100%.Его высота составляет около 50 пикселей, в зависимости от его содержимого.

Можно ли задать этому #footer фоновое изображение, переполняющее этот div?

Изображение размером около 800x600 пикселей, и я хочучтобы быть расположен в левом нижнем углу нижнего колонтитула.Это должно работать как фоновое изображение для моего сайта, но я уже установил фоновое изображение на моем теле.Мне нужно другое изображение, расположенное в левом нижнем углу моего веб-сайта, и для этого идеально подойдет 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 не справляется с работой!

Answer 1

Есть очень легкий трюк.Установите для отступа этого div положительное число, а для поля - отрицательное

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

Answer 2

Я не верю, что вы можете сделать фоновое изображение переполнением его div.Изображения, помещенные в теги изображений, могут переполнять родительский элемент div, но фоновые изображения ограничены элементом div, для которого они являются фоном.

Answer 3

Вы можете использовать элемент псевдо css3, как показано в этой статье

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

Answer 4

Нет, вы не можете.

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

Не забудьте добавить контент к этому новому элементу.Вот некоторый пример:

div {
  position: relative;
}    

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

Примечание: если вы хотите, чтобы он был «сверху» родительского div, используйте вместо него div::after.

Answer 5

Использование фоновой обложки сработало для меня.

#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

Answer 6

Вы упомянули уже фоновое изображение на body.

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

Answer 7

Это может помочь . Требуется, чтобы высота нижнего колонтитула была фиксированным числом. По сути, у вас есть div внутри div нижнего колонтитула с его обычным содержимым с position: absolute, а затем изображение с position: relative, отрицательным z-index, так что он остается «ниже» всего, и отрицательное значение top высота нижнего колонтитула минус высота изображения (в моем примере 50px - 600px = -550px). Протестировано в Chrome 8, FireFox 3.6 и IE 9.

Answer 8

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

Вы можете добавить еще один div в ваш div нижнего колонтитула и, тем не менее, применить к нему фоновое изображение и вместо этого иметь переполнение.

Answer 9

Используйте свойство trasform: scale (1.1), чтобы увеличить изображение bg, переместите его вверх с помощью позиции: относительный;верх: -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');
    }
}