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

Question

У меня есть нижний колонтитул со 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 не выполняет эту работу!

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

Answer 5

Существует очень простой трюк. Установить заполнение этого дела до положительного числа и краев к Negativ

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

Answer 6

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

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

Answer 7

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

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

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

div { 
    position: relative; 
}  

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

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

Answer 8

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

#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