it-swarm.com.ru

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

У меня есть 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 не делает работу!

65
matt

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

41
Daniel Bingham

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

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

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

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

12
Josh Sells

Нет, ты не можешь. 

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

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

div {
  position: relative;
}    

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

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

8
ArcTanH

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

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

4
stephenhay

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

#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

4
PanPipes

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

2
cambraca

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

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

2
hollsk

Используйте свойство transform: 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');
    }
}
1
Pavlo Kozachuk