使用 css 或 jquery 将背景图像调整为全高和全宽

Question

我只想要我家 div 的背景图片，它只对台式机和平板电脑可见（横向）。我可以用 CSS 媒体查询来调整它们。

但是我的背景图片不适合全高。

这是我的pluner代码。 http://plnkr.co/edit/HzlZdqvprkhzO1edqNKK?p=preview

我的jquery代码

$(document).ready(function(){
    console.log($('.home').height());
});

也返回 null。

解决这个问题的最佳方法是什么。

Answer 1

console.log($('.home').height());正在返回 null，因为您还没有为 home div.

设置高度属性

设置高度属性然后你就可以使用它或者做 Nick 告诉 background-size: auto 100%;

Answer 2

使用 background-size 属性共 css

background-size: 100% 100%;

Answer 3

将此代码添加到您的图像中，您将得到没有 jquery 的结果：

background: url(http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg) no-repeat center center fixed;
background-size: cover;
height: 400px;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;

秘密是使用 background-size: cover 然后将背景设置为固定高度和宽度 100%

Answer 4

http://jsfiddle.net/fynbc5uv/
你说你不想设置高度，唯一的解决方法是在 body 上设置 background-image。 CSS:

body{height:100%;
   background: url(http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

使用 css 或 jquery 将背景图像调整为全高和全宽

background image to full height and width using css or jquery

css

background-image