CSS:background-size:auto not working

时间:2017-02-27 04:03:39

标签: html css3

我已设置侧边栏以显示背景图像,并将背景图片大小设置为自动。

但是,背景图像根本没有显示。

documentation(背景图片设置为左侧边栏 <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>

{{1}}

当背景大小设置为自动时,为什么背景图像不显示?

2 个答案:

答案 0 :(得分:2)

由于我无法发表评论,我将不得不使用此答案文本框。我只是好奇,它真的是primary-sidebar而不是sidebar-primary吗?如果没有,那么我似乎找不到primary-sidebar类。如果是这样,您的背景图像是否为灰蓝色 - 白色?

答案 1 :(得分:1)

它显示在侧边栏中,但它当前设置为居中。侧边栏元素实际上是设计的全宽,因此表单当前覆盖了背景图像。将位置设置为左上角,您将看到背景图像。

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