Question

所以我在这里有http://jamessuske.com/freelance/seasons/

这个网站

正如您所看到的那样，背景是完整的，每个页面都有不同的背景。

所以在我的index.php中我有这段代码：

<?php include('include/header.php'); ?>
<img src="images/index.png" id="bg" class="bgwidth">

在我的header.php文件中，我有这个：

<div class="sitebar">
<ul>
<li><a href="#">Site One</a></li>
<li><a href="#">Site Two</a></li>
</ul>
</div><!--sitebar-->

但是我根本看不到网站栏div：下面是我的css

body{
    background-color:#000;
    margin:0;
    padding:0;
}

#bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
}

.bgwidth { 
    width: 100%; 
}

.bgheight { 
    height: 100%; 
}

.sitebar{
    position:relative;
    width:100%;
    background-color:#000;
    height:30px;
}

我尝试在网站栏上设置z-index为1000，在背景上设置为999，但这不起作用。

所以我猜这可能不是在全屏显示背景的最佳方式，因为我放在页面上的任何其他内容都不会出现。有什么建议吗？

这是一些帮助全屏显示背景的jQuery ..

<script type="text/javascript">
$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});
</script>

如果我将侧边栏放在图像下方并将位置设置为有效的相对位置，但我更希望网站位于图像上方。

Answer 1

将此添加到您的css

.sitebar {position:absolute; z-index:999;}

拥有背景全窗口的最佳方式

1 个答案: