背景图像在滚动时不保持固定

时间:2016-07-20 18:03:05

标签: javascript html css

我是HTML / CSS的新手,我正在设计一个基本的网页。我添加了背景图像并显示了它的信息。但是,当我滚动网页时,图像仍然固定在开头,当我向下滚动时,它不会显示任何背景。我附上了描述我问题的图片。

这是关于打开HTML文件的页面 This is my page on opening HTML file

这是我向下滚动的页面 And this is my page on scrolling down

这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | HOME
    </title>
</head>
<style>
    h2
    {
        color: yellow;
        font-family: courier;
    }
    body
    {
        position: absolute;
        top = 0;
        bottom = 0;
        left = 0;
        right = 0;
        background-image:url("tomb_raider_definitive_edition.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }
    .noselect /* Disable Copy Text */
    {
        -moz-user-select:none; /* Mozila FireFox */
        -ms-user-select: none; /* Internet Explorer */
        -webkit-user-select: none; /* Chrome, Safari, and Opera */
    }

</style>
<body>
<span style="color:red"></span>
<h2 class="noselect; h2">TOMB_RIDER (2013)</h3>
    <pre class="noselect">
        <!-- Some Info here -->
    </pre>
<p class="noselect" style="font-family: verdana;"><strong>TOMB_RIDER</strong></p>
    <a href="https://upload.wikimedia.org/wikipedia/en/f/f1/TombRaider2013.jpg">
    <img src="TombRaider2013.jpg">
    </a>
    <table border="1px"; style="border-style:solid;" class="noselect">
        <!-- Table code-->
    </table>
    <h2 class="noselect">Requerment !</h2>
</body>
</html>

我想要的是背景图像应该保持固定,只应滚动内容。

我还尝试了position: relative;position: fixed;,但没有一个正在运作。在询问之前,我还在SOW3Schools上进行了搜索,但我无法找到解决问题的方法。

任何形式的帮助将不胜感激。谢谢。

3 个答案:

答案 0 :(得分:3)

试一试

body
{
    position: absolute;
    top = 0;
    bottom = 0;
    left = 0;
    right = 0;
    background-image:url("tomb_raider_definitive_edition.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

答案 1 :(得分:3)

根据W3schools

background-attachment: scroll|fixed|local|initial|inherit;

检查此属性,这将解决您的问题..

此处,值fixed用于修复视口的背景。

您可以像这样编辑代码 -

body
{
    background-attachment: fixed;
    position: absolute;
    top = 0;
    bottom = 0;
    left = 0;
    right = 0;
    background-image:url("tomb_raider_definitive_edition.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

希望这会有所帮助。

答案 2 :(得分:1)

尝试使用 background-attachment: fixed; ,因为这会将背景图像附加到视口。