如何在背景图像上显示文本

时间:2014-01-15 16:08:09

标签: html css navigation background-image

我已经成功地将照片设置为我的网站的背景并让它填满页面,因此它是固定的而不是平铺的。现在我希望导航栏出现在图像的中心。但是,尽管我已将图像质量设置为“背景”,但导航栏仍隐藏在背景图像后面。如何使其显示在图像的中心。 这是我用于图像的编码:

<div>
<table cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img id="backgroundimage" src="websitebackground.jpg" />
        </td>
    </tr>
</table>
</div>
<style>
body, html { margin:0; padding:0; height:100%; }
#backgroundimage { position:fixed; left:0; top:0; z-index:1; height:100%; width:100%; }
</style>

2 个答案:

答案 0 :(得分:5)

除非您正在显示表格数据,否则不要使用表格。而是做这样的事情

HTML

<div id="backgroundimage">
    //header content goes in here
</div>

CSS

#backgroundimage{
    background-image: url("path-to-image");
    //other styles here
}

答案 1 :(得分:0)

您尚未正确采购图像,尚未将其作为背景图像使用

<body background="websitebackground.jpg" id="backgroundimage">

这应该将图像放在文本背后的背景中。