2017-02-27 111 views
0

我已經設置了一個側邊欄有一個背景圖像,並將背景圖像大小設置爲自動。CSS:背景大小:自動不工作

但是,背景圖像根本不顯示。

JSFiddle(背景圖片設置爲左側邊欄aside.sidebar-primary

<link rel="stylesheet" type="text/css" href="https://test.doig.com.au/temp/style.css"> 
    <link rel="stylesheet" type="text/css" href="https://test.doig.com.au/temp/styles.css"> 
    <link rel="stylesheet" type="text/css" href="https://test.doig.com.au/temp/mhm-style.css"> 
<div class="site-inner"> 
    <div class="content-sidebar-wrap"> 
    <main class="content" id="genesis-content"> 
     <article class="post-35 page type-page status-publish entry" itemscope="" itemtype="http://schema.org/CreativeWork"> 
     <div class="entry-content" itemprop="text"> 
      <h2>Contact Roofspan</h2> 
      <div id="contact-left"> 
      <h3 class="uppercase">Contact Us</h3> 
      <table> 
       <tbody> 
       <tr> 
        <td>Phone:</td> 
        <td></td> 
       </tr> 
       <tr> 
        <td>Email:</td> 
        <td></td> 
       </tr> 
       <tr> 
        <td>Address:</td> 
        <td></td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
      <div id="contact-right"> 
      <h3 class="uppercase">Send us a message</h3> 
      <div role="form" class="wpcf7" id="wpcf7-f67-p35-o1" lang="en-AU" dir="ltr"> 
       <div class="screen-reader-response"></div> 
       <form action="/contact-us/#wpcf7-f67-p35-o1" method="post" class="wpcf7-form" novalidate> 
       <div style="display: none;"> 
        <input type="hidden" name="_wpcf7" value="67"> 
        <input type="hidden" name="_wpcf7_version" value="4.6.1"> 
        <input type="hidden" name="_wpcf7_locale" value="en_AU"> 
        <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f67-p35-o1"> 
        <input type="hidden" name="_wpnonce" value="10410245ec"> 
       </div> 
       <p> 
        <label><span class="wpcf7-form-control-wrap your-name"> 
        <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Name" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"> 
        </span> </label> 
       </p> 
       <p> 
        <label><span class="wpcf7-form-control-wrap your-email"> 
        <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email"> 
        </span> </label> 
       </p> 
       <p> 
        <label><span class="wpcf7-form-control-wrap your-phone"> 
        <input type="text" name="your-phone" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Phone Number"> 
        </span> </label> 
       </p> 
       <p> 
        <label><span class="wpcf7-form-control-wrap your-message"> 
        <textarea name="your-message" cols="40" rows="5" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Message"></textarea> 
        </span> </label> 
       </p> 
       <p> 
        <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"> 
        <span class="ajax-loader"></span></p> 
       <div class="wpcf7-response-output wpcf7-display-none"></div> 
       </form> 
      </div> 
      </div> 
      <a class="post-edit-link" href="http://roofspan.madhatmedia.com.au/wp-admin/post.php?post=35&amp;action=edit">(Edit)</a></div> 
     </article> 
    </main> 
    <aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope="" itemtype="http://schema.org/WPSideBar" id="genesis-sidebar-primary"> 
     <h2 class="genesis-sidebar-title screen-reader-text">Primary Sidebar</h2> 
     <section id="woocommerce_products-3" class="widget woocommerce widget_products"> 
     <div class="widget-wrap"> 
      <h3 class="widgettitle widget-title">Products</h3> 
      <ul class="product_list_widget"> 
      <li> <a href="http://roofspan.madhatmedia.com.au/product/air-conducting/" title="Air-Conducting"><span class="product-title">Air-Conducting</span> </a> </li> 
      <li> <a href="http://roofspan.madhatmedia.com.au/product/rainheads/" title="Rainheads"><span class="product-title">Rainheads</span> </a> </li> 
      <li> <a href="http://roofspan.madhatmedia.com.au/product/flumes/" title="Flumes"><span class="product-title">Flumes</span> </a> </li> 
      <li> <a href="http://roofspan.madhatmedia.com.au/product/upstands/" title="Upstands"><span class="product-title">Upstands</span> </a> </li> 
      <li> <a href="http://roofspan.madhatmedia.com.au/product/hatches/" title="Hatches"><span class="product-title">Hatches</span> </a> </li> 
      <li> <a href="http://roofspan.madhatmedia.com.au/product/sumps/" title="Sumps"><span class="product-title">Sumps</span> </a> </li> 
      <li> <a href="http://roofspan.madhatmedia.com.au/product/downpipes/" title="Downpipes"><span class="product-title">Downpipes</span> </a> </li> 
      <li> <a href="http://roofspan.madhatmedia.com.au/product/louvres/" title="Louvres"><span class="product-title">Louvres</span> </a> </li> 
      <li> <a href="http://roofspan.madhatmedia.com.au/product/flashings/" title="Flashings"><span class="product-title">Flashings</span> </a> </li> 
      <li> <a href="http://roofspan.madhatmedia.com.au/product/test-product/" title="Test Product"><span class="product-title">Test Product</span> </a> </li> 
      </ul> 
     </div> 
     </section> 
    </aside> 
    </div> 
</div> 

爲什麼當背景大小設置爲自動在背景圖像不顯示?

+0

其中的圖像的源 - –

回答

1

它顯示在邊欄中,但它目前被設置爲居中。側邊欄元素實際上是您設計的整個寬度,所以背景圖片目前已被表格覆蓋。將位置設置爲左上角,您將看到背景圖像。

url('images/bg-sidebar.png') no-repeat top left 
2

由於我無法評論,我必須使用此答案文本框。我只是好奇,是真的primary-sidebar而不是sidebar-primary?如果沒有,那麼我似乎無法找到類primary-sidebar。如果是這樣,你的背景圖像是否有灰藍白色?

+0

感謝卡爾,是有'.sidebar-primary',是的,背景圖像是灰色/藍色/白色。 – Steve

+0

檢查你的小提琴,背景可以在產品列表中看到。雖然我認爲小提琴演示的設計與工作區中的設計不同 – Swellar

+0

嗨Carl,產品列表背景是一種統一的灰色@ https://jsfiddle.net/SRD75/sLyLjfbt/3/ – Steve