我已将侧边栏设置为具有背景图像，并将背景图像的大小设置为自动。
但是，背景图像根本不显示。
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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg=="); 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&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>
当背景尺寸设为自动时，为什么背景图像不显示？
最佳答案
它显示在边栏中，但当前设置为居中。边栏元素实际上是设计的整个宽度，因此背景图像当前被表单覆盖。将位置设置为左上角，您将看到背景图像。
url('images/bg-sidebar.png') no-repeat top left
关于html - CSS:background-size:自动不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42477634/