CODEWITHSUNDEEP
htmlcss
Steve
Steve

Reputation: 1765

CSS: background-size: auto not working

I've set a sidebar to have a background image, and set the background image size to be auto.

However, the background image is not displaying at all.

JSFiddle (the background image is set for the left sidebar 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>

Why is the background image not displaying when the background size is set to auto?

Upvotes: 0

Views: 458

Answers (2)

kidconcept
kidconcept

Reputation: 559

It is displaying in the sidebar, but it's currently set to be centered. The sidebar element is actually the full width of your design, so the background image is currently covered by the form. Set the position to be top-left and you'll see the background image.

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

Upvotes: 1

Carl Binalla
Carl Binalla

Reputation: 5401

Since I can't comment, I'll have to use this answer textbox. I'm just curious, is it really primary-sidebar and not sidebar-primary? If not, then I can't seem to find the primary-sidebar class. If so, does your background image has a gray-blue-white color?

Upvotes: 2

Related Questions