Question

  body
        {
        background-image: url('../Media/bg3.jpg') ;
        background-repeat: no-repeat;
        background-size: 100%;

        }

图像底部不适合屏幕。我在css body标签中添加了背景图片。宽度是完美的。但高度不适合屏幕。我看到很多例子。但它没有来。

Answer 1

这两行足以修复和拉伸背景图像！

body{   
background:url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat fixed;
background-size:cover;
}

JSFIDDLE： - FIDDLE DEMO HERE

Answer 2

你可以使用以下代码

body
        {
        background-image: url('../Media/bg3.jpg') ;
        background-repeat: no-repeat;
        background-size: 100%;
        height:100%;
        }

Answer 3

尝试background-size: cover，它应该适合屏幕

Answer 4

您可以设置以下属性

检查 Demo jsFiddle

CSS

body {
    background: url('../Media/bg3.jpg') no-repeat center center fixed;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

CSS

检查 Demo jsFiddle

    background-image: url('../Media/bg3.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
    background-attachment: fixed;

Answer 5

将您的背景图片添加为

background: url(../images/your_image.jpg) fixed no-repeat center center;
background: url(../images/your_image.jpg) no-repeat center center; /* if you don't want it fixed */

里面的div用它来完成中心

width:100px;
height:100px;
position: absolute;
text-align: center;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;

Answer 6

现在它正在运作。

body
{
    background-image: url('../Media/bg3.jpg') ;
    background-repeat: no-repeat;
    background-size: 100%;
    height:870px;
    background-image: url('../Media/bg3.jpg');
}

footer
{
    position: absolute;
    bottom: 0;
}

现在它适合全屏。谢谢你

Answer 7

删除body标签css类并添加html类来做到这一点这是代码

`html { 
 background: url('../Media/bg3.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

`

背景图片不适合全屏。高度正在减少

7 个答案:

CSS

CSS