Question

自从我编写任何内容之后，我已经很久了，而且我最近又根据受欢迎的Minecraft特许经营权再次建立了一个新网站。任何人，我在实际显示我想要的导航栏时遇到一点麻烦。基本上，我有一个背景图片，我想跨越徽标，导航和社交媒体图标，所涉及的图像是：

http://minethediamond.com/wp-content/themes/minethediamond/img/navbg.jpg

这就是问题所在。我有一个用于标识，导航和社交图标的ul类的分区容器，但它仅仅跨越徽标而已，仅此而且我不知道为什么。您可以看到的网站位于MineTheDiamond.com。

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

.top-bar-section {background-image: url('../img/navbg.jpg'); width: 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>`

提前致谢，全部！：）

Answer 1

这就是诀窍，只需定位元素并具有background-size：cover;

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

enter image description here

您可能会遇到一些值得研究的IE8问题，但这应该适用于大多数问题。

如果您希望顶部区域跨越整个标题，只需将宽度从auto更改为100％

Answer 2

您希望查看background-size:cover以包含单个图像的整个div

请注意，这在IE8中不起作用，因此应该使用后备支持

请阅读此处了解更多详情 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

背景图像不通过导航动态

2 个答案: