Php 通过导航，背景图像不是动态的

我已经有很长一段时间没有编写任何代码了，最近我又根据流行的Minecraft特许经营权建立了一个新网站。不管怎么说，当我想要实际显示导航栏时，我遇到了一点麻烦。基本上，我有一个背景图像，我想跨越徽标、导航和社交媒体图标，有问题的图像是：

这就是问题所在。我有一个用于ul商标、导航和社交图标类的节容器，但它只涵盖商标，没有其他内容，我不知道为什么。您可以看到的网站位于MineTheDiamond.com

对于我添加的特定代码，在CSS中基本上是这样的：

.top bar部分{背景图像：url（'../img/navbg.jpg'）；宽度：auto；}

还有一些其他的死胡同风格的使用，我试图在CSS中复制，以实际获得导航显示，但如上所述，它没有工作

当然，标题部分的必备内容是：

<div class="large-3 small-12 columns">
            <P><P><div class="navcontainer"><div id="minenav">  
<section class="top-bar-section"><ul class="left"><div id="logo">
                    <a href="<?php echo home_url('/'); ?>"
                       title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home">
                        <img src="<?php /* Use the default logo (logo.png) if custom logo does not exist */
                        if ($smof_data['pkb_custom_logo']) : echo $smof_data['custom_logo']; else: echo get_template_directory_uri();?>/img/logo.png<?php endif; ?>"
                             alt=" logo"/>
                    </a></ul>



                            <?php
                            wp_nav_menu(array(
                                'theme_location' => 'primary',
                                'container' => false,
                                'depth' => 0,
                                'items_wrap' => '<ul class="left">%3$s</ul>',
                                'fallback_cb' => 'menu_fallback', // workaround to show a message to set up a menu
                                'walker' => new peekaboo_walker(array(
                                    'in_top_bar' => true,
                                    'item_type' => 'li'
                                )),
                            ));
                            ?>
                            <?php include 'incl/social-toolbox.php'; ?></section>
                        </div>`

 



您需要查看
背景尺寸：cover
，以便包含具有单个图像的整个div

请注意，这在IE8中不起作用，因此应该使用回退来支持它

请阅读此处了解更多详细信息
这就做到了，只需定位元素并设置背景大小：封面

.top-bar-section {
     background-image: url('../img/navbg.jpg');
     width: auto;
     position: relative;
     float: left;
     background-size: cover;
}


您可能有一些IE8问题值得研究，但这应该适用于大多数情况

如果您想让顶部部分覆盖整个页眉，只需将宽度从“自动”更改为100%
1。什么是？2.hyou是否尝试将ul和div的内部背景透明化？只是为了让我在登录时能看到我在做什么，并确保在添加各种边距之前一切正常。：）嗨，谢谢你的帮助！它现在覆盖了整个区域，但出于某种原因，它不再在x轴上分开，而是以列表格式向下移动？有什么帮助吗？很抱歉让你很痛苦！查找这一行
@StevenR将其更改为
大-12
，在此处放置小-12没有任何意义这已经解决了我遇到的问题，但现在我担心IE8的解决方法；是否值得在Photoshop中使用导航栏来确保浏览器间的一切正常，或者是否有解决方法？@StevenR你可以这样做，我通常不会太担心，我会在网站上线时检查你的分析，如果有很大一部分IE8用户，那么我会考虑做些什么，在我的网站上，他们代表了一个小数目，但这是一个你需要作出的决定。