如何拉伸背景图片以覆盖整个HTML元素？ [英] How do I stretch a background image to cover the entire HTML element?

问题描述

我想要获得HTML元素（正文，div等）的背景图片，以扩展其整个宽度和高度。

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?

我当前的CSS是：

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

提前感谢。

编辑：我不喜欢在Gabriel的建议维护CSS，所以我改变页面的布局。

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.

推荐答案

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

这篇关于如何拉伸背景图片以覆盖整个HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！