Может ли фоновое изображение быть больше самого 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 не выполняет эту работу!

Ответы

Ответ 1

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

Ответ 2

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

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

Ответ 4

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

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

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

div {
  position: relative;
}    

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 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