Блог

Прошло чертовски много времени с тех пор, как я что-либо кодировал, и недавно я снова создал новый сайт, основанный на популярной франшизе 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>`
  

Заранее спасибо всем! 🙂

Это делает свое дело, просто расположите элемент и установите background-size: cover;

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

Возможно, у вас есть некоторые проблемы с IE8, на которые стоит обратить внимание, но это должно сработать для большинства.

И если вы хотите, чтобы верхняя часть занимала весь заголовок, просто измените ширину с auto на 100%

Вы хотите посмотреть background-size:cover , чтобы содержать весь div с одним изображением

имейте в виду, что это не будет работать в IE8, поэтому его следует подкрепить резервным вариантом

Подробнее читайте здесь https://developer.mozilla.org/en-US/docs/Web/CSS/background-size