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

我试图获得一个 HTML 元素(body、 div 等)的背景图像来拉伸它的整个宽度和高度。

运气不太好。这有可能吗，还是说除了背景图片我还得用别的方法？

我现在的 css 是:

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

先谢谢你。

编辑: 我不热衷于在加布里埃尔的建议中维护 CSS，所以我改变了页面的布局。但这似乎是最好的答案，所以我把它标记为这样。

384443 次浏览
小开

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 :)

小开

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.

小开

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

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

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.

{
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
小开

Use the background-size property: http://www.w3.org/TR/css3-background/#the-background-size

小开
最佳答案 
<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>
小开

In short you can try this....

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

Where I have used few css and js...

<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>

And it is working fine for me.

小开 
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;
小开

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:

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;
}
}
小开

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

body {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
小开

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:

body {
background-image: url('../images/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
小开

image{

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%;
小开

Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:

.bg {
background-image: url('_images/home.jpg');//Put your appropriate image URL here
background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp Scroll down to the part that says:

  1. If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area

There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.

小开

It works for me

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

提交答案