HTML代码

Question

我需要一个图片与整个页面重叠的页面。我现在有这个代码，但我的图像只是附加在底部。

非常感谢任何帮助/建议！

HTML代码

<html>
  <head>
    <link rel="stylesheet" href="/media/themes/txt/css/record_keeper/training_report.css" />
  </head>

  <body style="position:relative;">
    <div class="content">
       <p>Content here</p>
    </div>
    <img src="/media/images/record_keeper/lines.jpg" style="z-index:10; position:relative;">
  </body>
</html>

Answer 1

如果您希望将该图片放在首位，则需要使用position: absolute，并为其提供一些top，left等选项。

<img src="/media/images/record_keeper/lines.jpg" style="z-index:10; position:absolute; top:0; left:0;">

Answer 2

使用纯CSS的替代解决方案是：

这将创建一个带有背景图像的前景div。

<强> HTML

<div class="content">
    <p>Content here</p>
</div>

<div class="MyImg"></div>

<强> CSS

.MyImg{
    background: #eee url(http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png) center center no-repeat;
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:1000;
}

CLICK FOR DEMO

Answer 3

您可以尝试在身体周围添加div标签：

    <div id=wrapper>
        <body>
            *content goes here*
        </body>
    </div>

然后在你的CSS上：

    #wrapper {
         background-image:url('/media/images/record_keeper/lines.jpg');
    }

这是你想要做的吗？

尝试前景图像不起作用

HTML代码

3 个答案:

CLICK FOR DEMO