2017-02-27 110 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