blocks|key|1997952|text|我不相信你可以让背景图片溢出它的div。放在Image标签中的图像可以溢出它们的父div，但背景图像受到它们作为背景的div的限制。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1997953|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I do not believe that you can make a background image overflow its div. Images placed in Image tags can overflow their parent div, but background images are limited by the div for which they are the background.

blocks|key|1998055|text|有一个非常简单的技巧。将div的填充设置为正数，将边距设置为负数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1998056|#wrapper+{
+++++background:+url(xxx.jpeg);
+++++padding-left:+10px;
+++++margin-left:+-10px;
}|code-block|syntax|javascript|1998057|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There is a very easy trick. Set padding of that div to a positive number and margin to negativ

<pre><code>#wrapper {
 background: url(xxx.jpeg);
 padding-left: 10px;
 margin-left: -10px;
}
</code></pre>

blocks|key|1784305|text|您可以使用css3伪元素(:before和/或:after)，如本文所示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1784306|https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/|1784307|祝你好运。|1784308|entityMap|0|LINK|mutability|MUTABLE|url^0|D|7|N|6|0|0|28|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|G]]]]

You can use a css3 psuedo element (<code>:before</code> and/or <code>:after</code>) as shown in this article

<a href="https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/" rel="noreferrer">https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/</a>

Good Luck...

blocks|key|1784321|text|不，你不能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1784322|但作为一种可靠的解决办法，我建议将第一个div分类为position:relative，并使用div::before创建包含您的图像的底层元素。归类为position:absolute，你可以把它移到相对于初始div的任何地方。|offset|length|style|CODE|1784323|不要忘了向新元素中添加内容。下面是一些示例：|1784324|div+{
++position:+relative;
}++++

div::before+{
++content:+"";+/*+empty+but+necessary+*/
++position:+absolute;
++background:+...
}|code-block|syntax|javascript|1784325|注意:如果您希望它位于父div的“顶部”，请改用div::after。|1784326|entityMap^0|0|Q|H|1B|B|23|H|0|0|0|O|A|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|12|8|@$D|13|E|14|F|G]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

No, you can't. 

But as a solid workaround, I would suggest to classify that first div as <code>position:relative</code> and use <code>div::before</code> to create an underlying element containing your image. Classified as <code>position:absolute</code> you can move it anywhere relative to your initial div. 

Don't forget to add content to that new element. Here's some example:

<pre><code>div {
 position: relative;
} 

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

Note: if you want it to be 'on top' of the parent div, use <code>div::after</code> instead.

blocks|key|1784351|text|使用背景大小的封面对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1784352|#footer+{
++++background-color:+#eee;
++++background-image:+url(images/bodybgbottomleft.png);
++++background-repeat:+no-repeat;
++++background-size:+cover;
++++clear:+both;
++++width:+100%25;
++++margin:+0;
++++padding:+30px+0+0;
}|code-block|syntax|javascript|1784353|显然要注意支持问题，请检查我是否可以使用：http://caniuse.com/#search=background-size|offset|length|1784354|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#search=background-size^0|0|0|L|16|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Using background-size cover worked for me.

<pre><code>#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;
}
</code></pre>

Obviously be aware of support issues, check Can I Use: <a href="http://caniuse.com/#search=background-size" rel="noreferrer">http://caniuse.com/#search=background-size</a>

blocks|key|1998042|text|你提到在body上已经有了一个背景图片。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1998043|你可以在html上设置那个背景图像，在body上设置新的背景图像。这当然取决于你的布局，但你不需要使用你的页脚。|1998044|entityMap^0|4|4|0|4|4|J|4|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

You mention already having a background image on <code>body</code>.

You could set that background image on <code>html</code>, and the new one on <code>body</code>. This will of course depend upon your layout, but you wouldn't need to use your footer for it.

blocks|key|1784400|text|使用trasform:+scale(1.1)属性来放大bg图像，使用position:+relative；top：-10px将其向上移动；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1784401|<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');
++++}
}|code-block|syntax|javascript|1784402|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use trasform: scale(1.1) property to make bg image bigger, move it up with position: relative; top: -10px;

<pre><code>&lt;div class="home-hero"&gt;
 &lt;div class="home-hero__img"&gt;&lt;/div&gt;
&lt;/div&gt;

.home-hero__img{
 position:relative;
 top:-10px;
 transform: scale(1.1);
 background: {
 size: contain;
 image: url('image.svg');
 }
}
</code></pre>

blocks|key|1784186|text|实际上并非如此--背景图像是由它所应用的元素所限定的，溢出属性只适用于元素中的内容(即标记)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1784187|你可以将另一个div添加到你的footer+div中，并将背景图像应用于该div，然后让该div溢出。|1784188|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Not really - the background image is bounded by the element it's applied to, and the overflow properties only apply to the content (i.e. markup) within an element. 

You can add another div into your footer div and apply the background image to that, though, and have that overflow instead.

blocks|key|1784243|text|This+could+help。它要求页脚高度是一个固定的数字。基本上，你在footer+div里面有一个包含正常内容的div，带有position:+absolute，然后是带有position:+relative的图像，一个负的z-index使它保持“低于”所有内容，以及一个负的页脚高度减去图像高度的top值(在我的例子中是50px+-+600px+=+-550px)。在Chrome8、FireFox+3.6和IE+9上进行了测试。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1784244|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/sqPmf/5/^0|1U|I|2I|I|38|7|49|3|4L|L|0|F|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<a href="http://jsfiddle.net/sqPmf/5/" rel="nofollow">This could help</a>.
It requires the footer height to be a fixed number. Basically, you have a div inside the footer div with it's normal content, with <code>position: absolute</code>, and then the image with <code>position: relative</code>, a negative <code>z-index</code> so it stays "below" everything, and a negative <code>top</code> value of the footer's height minus the image height (in my example, <code>50px - 600px = -550px</code>). Tested in Chrome 8, FireFox 3.6 and IE 9.

I have a footer div with 100% width. It's about 50px high, depending on its content.

Is it possible to give that #footer a background image that kind of overflows this div?

The image is about 800x600px, and I want it to be positioned in the left bottom corner of the footer. It should work sort of like a background image for my website, but I've already set a background image on my body. I need another image positioned at the bottom left corner of my website and the #footer div would be perfect for that.

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

The image is set to the footer, however it doesn't overflow the div. Is it possible to make that happen?

<code>overflow:visible</code> doesn't do the job!

Can a background image be larger than the div itself?

我有一个100%宽度的footer div。它的高度约为50px，具体取决于其内容。有没有可能给#footer一个背景图片，让它溢出这个div？图像大约是800x600px，我想把它放在页脚的左下角。它应该有点像我的网站的背景图像，但我已经在我的身体上设置了一个背景图像。我需要另一个图像位于我的网站的左下角，#footer div将是完美的。#footer {    clear: both;   

问背景图片可以比div本身更大吗？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景图片可以比div本身更大吗？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景图片可以比div本身更大吗？
EN