blocks|key|1707386|text|<style>
++++{+margin:+0;+padding:+0;+}

++++html+{+
++++++++background:+url('images/yourimage.jpg')+no-repeat+center+center+fixed;+
++++++++-webkit-background-size:+cover;
++++++++-moz-background-size:+cover;
++++++++-o-background-size:+cover;
++++++++background-size:+cover;
++++}
</style>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1707387|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;style&gt;
 { margin: 0; padding: 0; }

 html { 
 background: url('images/yourimage.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 }
&lt;/style&gt;
</code></pre>

blocks|key|1492405|text|使用background-size属性：http://www.w3.org/TR/css3-background/#the-background-size|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1492406|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-background/#the-background-size^0|2|F|K|1L|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Use the <code>background-size</code> property: <a href="http://www.w3.org/TR/css3-background/#the-background-size" rel="noreferrer">http://www.w3.org/TR/css3-background/#the-background-size</a>

blocks|key|1707431|text|简而言之，你可以试试这个……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707432|<div+data-role="page"+style="background:url('backgrnd.png');+background-repeat:+no-repeat;+background-size:+100%25+100%25;"+>|code-block|syntax|javascript|1707433|​|1707434|其中我使用了很少的css和js...|1707435|<link+rel="stylesheet"+href="css/jquery.mobile-1.0.1.min.css"+/>
<script+src="js/jquery-1.7.1.min.js"></script>
<script+src="js/jquery.mobile-1.0.1.min.js"></script>|1707436|它对我来说运行得很好。|1707437|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

In short you can try this....

<pre><code>&lt;div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" &gt;
</code></pre>



Where I have used few css and js...

<pre><code>&lt;link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" /&gt;
&lt;script src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;
</code></pre>

And it is working fine for me.

blocks|key|1707227|text|不确定是否可以拉伸背景图像。如果您发现这在所有目标浏览器中都是不可能的或不可靠的，您可以尝试使用一个伸展的img标记，将z-index设置得更低，并将位置设置为绝对，以便其他内容显示在它上面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707228|让我们知道你最终会做什么。|1707229|编辑:我建议的基本上是gabriel链接中的内容。所以尝试一下:)|1707230|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.

Let us know what you end up doing.

Edit: What I suggested is basically what's in gabriel's link. So try that :)

blocks|key|1707355|text|要扩展@PhiLho答案，您可以在页面上居中放置非常大的图像(或任何大小的图像)，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707356|{+
background-image:+url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;+
}|code-block|syntax|javascript|1707357|或者，您可以使用较小的图像，其背景颜色与图像的背景颜色相匹配(如果是纯色)。这可能适合也可能不适合您的目的。|1707358|{+
background-color:+green;
background-image:+url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;+
}|1707359|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To expand on @PhiLho answer, you can center a very large image (or any size image) on a page with: 

<pre><code>{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}
</code></pre>

Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.

<pre><code>{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}
</code></pre>

blocks|key|1707571|text|如果您需要在调整屏幕大小时拉伸背景图像，并且不需要与较旧的浏览器版本兼容，则可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707572|body+{
++++background-image:+url('../images/image.jpg');
++++background-repeat:+no-repeat;
++++background-size:+cover;
}|code-block|syntax|javascript|1707573|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|$]]

If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:

<pre><code>body {
 background-image: url('../images/image.jpg');
 background-repeat: no-repeat;
 background-size: cover;
}
</code></pre>

blocks|key|1707487|text|如果您有较大的横向图像，则此示例在纵向模式下调整背景的大小，使其显示在顶部，而在底部保留空白：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707488|html,+body+{
++++margin:+0;
++++padding:+0;
++++min-height:+100%25;
}

body+{
++++background-image:+url('myimage.jpg');
++++background-position-x:+center;
++++background-position-y:+bottom;
++++background-repeat:+no-repeat;
++++background-attachment:+scroll;
++++-webkit-background-size:+cover;
++++-moz-background-size:+cover;
++++-o-background-size:+cover;
++++background-size:+cover;
}

@media+screen+and+(orientation:portrait)+{
++++body+{
++++++++background-position-y:+top;
++++++++-webkit-background-size:+contain;
++++++++-moz-background-size:+contain;
++++++++-o-background-size:+contain;
++++++++background-size:+contain;
++++}
}|code-block|syntax|javascript|1707489|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|$]]

If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:

<pre><code>html, body {
 margin: 0;
 padding: 0;
 min-height: 100%;
}

body {
 background-image: url('myimage.jpg');
 background-position-x: center;
 background-position-y: bottom;
 background-repeat: no-repeat;
 background-attachment: scroll;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

@media screen and (orientation:portrait) {
 body {
 background-position-y: top;
 -webkit-background-size: contain;
 -moz-background-size: contain;
 -o-background-size: contain;
 background-size: contain;
 }
}
</code></pre>

blocks|key|1707539|text|下面的代码我主要用来实现被问到的效果：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707540|body+{
++++background-image:+url('../images/bg.jpg');
++++background-repeat:+no-repeat;
++++background-size:+100%25;
}|code-block|syntax|javascript|1707541|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|$]]

The following code I use mostly for achieving the asked effect:

<pre><code>body {
 background-image: url('../images/bg.jpg');
 background-repeat: no-repeat;
 background-size: 100%;
}
</code></pre>

blocks|key|1707462|text|background:+url(images/bg.jpg)+no-repeat+center+center+fixed;+
-webkit-background-size:+cover;
-moz-background-size:+cover;
-o-background-size:+cover;
background-size:+cover;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1707463|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
</code></pre>

blocks|key|1707599|text|对我来说很管用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707600|.page-bg+{
++background:+url("res://background");
++background-position:+center+center;
++background-repeat:+no-repeat;
++background-size:+100%25+100%25;
}|code-block|syntax|javascript|1707601|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|$]]

It works for me

<pre><code>.page-bg {
 background: url("res://background");
 background-position: center center;
 background-repeat: no-repeat;
 background-size: 100% 100%;
}
</code></pre>

blocks|key|1707308|text|你不能在纯CSS中使用。在所有其他组件后面有一个覆盖整个页面的图像可能是你最好的选择(看起来这就是上面给出的解决方案)。无论如何，很可能它看起来很糟糕。我会尝试一个足够大的图像来覆盖大多数屏幕分辨率(比如1600x1200，超过1600x1200)，来限制页面的宽度，或者仅仅使用平铺的图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707309|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|$]]

You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.

blocks|key|1707595|text|图像{|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707596|background-size:+cover;
++background-repeat:+no-repeat;
++background-position:+center;
++padding:+0+3em+0+3em;+
margin:+-1.5em+-0.5em+-0.5em+-1em;+
++width:+absolute;
++max-width:+100%25;+|code-block|syntax|javascript|1707597|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|$]]

image{

<pre><code>background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
 width: absolute;
 max-width: 100%; 
</code></pre>

I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.

Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?

My current css is:

<pre><code>body {
 background-position: left top;
 background-image: url(_images/home.jpg);
 background-repeat: no-repeat;
}
</code></pre>

Thanks in advance.

Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.

How do I stretch a background image to cover the entire HTML element?

我正在尝试获取HTML元素(body、div等)的背景图像。以拉伸其整个宽度和高度。运气不是很好。有没有可能，或者除了背景图像之外，我还需要用其他方式来做吗？我目前的css是：body {    background-position: left top;    background-image: url(_images/home.jpg);    background-repeat: no-re

问如何拉伸背景图像以覆盖整个HTML元素？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何拉伸背景图像以覆盖整个HTML元素？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何拉伸背景图像以覆盖整个HTML元素？
EN