如何为div设置固定的背景?

时间:2017-06-21 09:09:59

标签: html css

我正在制作用于android的cordova项目,同时为了提高性能目的,我将所有html文件转换为一个文件,因此我无法在< body>中应用任何类或设置背景图像标签。另外,我需要为< div> 标记设置背景图片 我尝试使用以下代码,但图像没有完全设置为背景,顶部,底部,左侧和右侧有一些空间,背景图像最终会滚动很少。如果图像是拉伸,那不是问题。

从下面的输出中你无法理解我的整个问题,所以请复制整个代码并在你的系统中创建一个新的html文件并检查移动视图。

<html>
<head>
<title>Test</title>
<style>
.fxdback
{
    height: 100vh;
    overflow: scroll;
    background: url(https://s4.postimg.org/rfdxbny59/menus-min.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}	
</style>
</head>

<body>

<div class="fxdback">
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
This ist he test<br/>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

尝试这种方式。

<div id="mytext" style="background: center cover fixed no-repeat url('https://s4.postimg.org/rfdxbny59/menus-min.jpg');">

<!-- Your content here -->

</div>

希望它能够奏效。

答案 1 :(得分:0)

您正在尝试根据我的理解创建视差效果。

你可以试试这个:

.bgimg-1 {                              // this is the most important code
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

//this one for image (Logo. Full height)
.bgimg-1 {
    background-image: url('image path');
    min-height: 100%;
}

如果您有多个html并希望保持所有文件相同,则可以将其放在单独的css文件中。