Как разместить фон из 3х изображений с отступами и repeat

Тема в разделе "Верстка", создана пользователем Urch, 16 янв 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Urch

    Urch Вебмастер

    Регистр.:
    3 янв 2008
    Сообщения:
    263
    Симпатии:
    73
    Здравствуйте! Помогите пожалуйста разместить фон top_menu.png для кнопки
    Проблема: не показывает фон вообще... может это спецификация wordpress?
    PHP:
      <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
      <div class="nav-collapse" <?php echo $menu_options 'id="swipe-menu-responsive"' ''?>>

           <ul class="nav">
          
             <?php if($menu_options) { ?>
               <li><span id="close-menu">
                 <a href="#" class="close-this-menu">Close</a>
            
               <script type="text/javascript">
                 jQuery('a.sidr-class-close-this-menu').click(function(){
                   jQuery('div.sidr').css({
                     'right': '-476px'
                   });
                   jQuery('body').css({
                     'right': '0'
                   });            
                 });
               </script>
            
               </span></li>
             <?php ?>
          
             <li><a href="<?php echo home_url'/' ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/home.png" alt="<?php bloginfo('name'); ?>"></a></li>
             <?php
             
    if ( function_exists'has_nav_menu' ) && has_nav_menu'primary' ) ) {
               
    wp_nav_menu( array( 'depth' => 6'sort_column' => 'menu_order''container' => '''items_wrap' => '%3$s''theme_location' => 'primary' ) );
             } else {
               
    wp_list_categories'sort_column=menu_order&depth=6&title_li=' );
             } 
    ?>
           </ul>

      </div><!--/.nav-collapse -->
        
      </nav><!-- /.navbar -->


    Код:
    .navbar .nav > li > a:focus {
      color:#fff !important;
    background-image: url(top_menu-l.png)  top left no-repeat, url(top_menu-r.png)  top right no-repeat, url(top_menu.png) left 5px right 5px repeat;}
    
     
    Последнее редактирование модератором: 16 янв 2014
  2. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    попробуй так:
    Код:
    background-image: url(top_menu-l.png)  top left no-repeat, url(top_menu-r.png)  top right no-repeat, url(top_menu.png) left 5px right 5px repeat;
    
    И проверь пути к изображениям, не понимаю о какой специфике может идти речь, cms здесь не причём...
    это css3
     
    Последнее редактирование: 16 янв 2014
    Горбушка нравится это.
  3. Urch

    Urch Вебмастер

    Регистр.:
    3 янв 2008
    Сообщения:
    263
    Симпатии:
    73
    не показывает

    c repeat это не работает
     
    Последнее редактирование модератором: 16 янв 2014
  4. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    Если есть необходимость в помощи, размести в первом посте ссылку на источник проблемы,
    посмотрю, помогу...
    почитать можно здесь: http://www.css3.info/preview/multiple-backgrounds/

    попробуй поставить
    Код:
    url(top_menu.png) left 5px right 5px repeat repeat;
    З.ы. не может быть, что бы не работало из за repeat ибо он поддерживается css1, css2, css2.1 и css3
     
    Последнее редактирование: 16 янв 2014
  5. Urch

    Urch Вебмастер

    Регистр.:
    3 янв 2008
    Сообщения:
    263
    Симпатии:
    73
    видимо такого случая не предусмотрели или быть может он появиться в следующей версии CSS
     
  6. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    Хз, в таком случае советую такой вариант оформления:
    пример реализации кнопки
    HTML:
    
    <a class="b-button b-button_round_green b-button_float_right b-button_margtop_7 " href="#">
        <span class="b-button__b1">
            <span class="b-button__b2">
                <span class="b-button__txt">Здесь текст</span>
            </span>
        </span>
    </a>
    

    HTML:
    
    .b-button_round_green {
    height: 36px;
    background: url("b-button_round_color.png") no-repeat right -36px;
    padding-right: 17px !important;
    cursor: pointer;
    }
    
    .b-button_round_green .b-button__b1 {
    background: url("b-button_round_color.png") no-repeat 0 0;
    padding-left: 17px !important;
    }
    
    .b-button__b1 {
    display: block;
    }
    
    .b-button_round_green .b-button__b2 {
    background: url("b-button_round_color.png") repeat-x 0 -72px;
    font-weight: bold;
    line-height: 36px;
    height: 36px;
    }
    
    .b-button__b2 {
    display: block;
    }
    


    Ps: На выходе получаешь то, что ты хочешь, только с использованием большего количества кода и стилей...
     
  7. Urch

    Urch Вебмастер

    Регистр.:
    3 янв 2008
    Сообщения:
    263
    Симпатии:
    73
    это не подойдет так как кнопки растягиваются
     
  8. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    в смысле? причём здесь вообще кнопка? ты делегируй своё внимание со слова кнопка на код и стиль,
    это я тупо привёл подручный пример реализации того, что ты хочешь сделать, а то для чего это будет реализовано, не имеет значения ибо уж это точно сработает, т.к. сам не раз использовал данный подход!