Question

我想用css添加背景图片，但它不起作用。浏览器向我显示一个空白页面。

我的application.css

home-body {
    background-image: url('/home.jpg') no-repeat center center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;

}

file home.jpg位于目录/public/home.jpg。

如何修复？

Answer 1

请使用此代码。使用背景而不是背景图像，并确保在url（）中插入了正确的图像路径。

    html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
    .home-body {
    background: url('/home.jpg') no-repeat center center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;

}

Answer 2

如果您使用外部CSS文件...请确保相对于CSS文件链接图像文件。例如

-ROOT -css -file.css -background.jpg -index.html

你需要：

background("../background.jpg");

因为“..”会把你带到一个目录：）

Answer 3

可能是由3个问题引起的

1- home-body不是html的标记。因此它应该是标记的id或类名。因此，您应该使用.home-body作为类名，#home-body作为id名称。< / p>

2-你没有正确处理背景图像。如果你想确定，请将网址作为图像的绝对路径，如http://yoursiteUrl/public/image/image.png

3-你的css文件没有加载到你的page.try上，以确保它在你的网站上正确加载，如果它被加载然后问题是第一个或第二部分在这里提到。

Answer 4

像这样非常容易....

.play{
    background: url("media_element/play.png") center center no-repeat;
    position : absolute;
    display:block;
    top:20%; 
    width:50px;
    margin:0 auto;
    left:0px;
    right:0px;
    z-index:100
}

使用CSS添加背景图像

4 个答案: