title: Blogger Blogspot different header1 image for Mobile from Desktop
body: <p>looking to show a different background image on my mobile template theme versus the desktop theme on blogger/blogspot blog.</p>
  
  <p>Currently it is showing the same image uploaded for the desktop theme in Layout/Header1 Widget. </p>
  
  <p>The code snippet below shows the Header1 Widget. I would like to A: Use an image to replace the blog title and description; and B: Use a different image for mobile versus desktop.</p>
  
  <p>I'm looking at the !--Show Image Only area and unsure how to add an if: data:blog.isMobile </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
      &lt;div class='header-outer'&gt;
      &lt;div class='header-cap-top cap-top'&gt;
        &lt;div class='cap-left'/&gt;
        &lt;div class='cap-right'/&gt;
      &lt;/div&gt;
      &lt;div class='fauxborder-left header-fauxborder-left'&gt;
      &lt;div class='fauxborder-right header-fauxborder-right'/&gt;
      &lt;div class='region-inner header-inner'&gt;
        &lt;b:section class='header' id='header' maxwidgets='1' showaddelement='no'&gt;
          &lt;b:widget id='Header1' locked='true' title='Wisconsin Explorer (Header)' type='Header'&gt;
            &lt;b:widget-settings&gt;
              &lt;b:widget-setting name='displayUrl'&gt;http://1.bp.blogspot.com/-2Pq9AO4eOJY/Wa30DFl96xI/AAAAAAAAIBs/QaONXMPNVS8ww6IjNgrn7jNUtAEkgQeeQCK4BGAYYCw/s1600/desktop%2Blogo.png&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='displayHeight'&gt;225&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='sectionWidth'&gt;752&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='useImage'&gt;true&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='shrinkToFit'&gt;false&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='imagePlacement'&gt;REPLACE&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='displayWidth'&gt;1100&lt;/b:widget-setting&gt;
            &lt;/b:widget-settings&gt;
            &lt;b:includable id='main'&gt;
  
    &lt;b:if cond='data:useImage'&gt;
      &lt;b:if cond='data:imagePlacement == &amp;quot;BEHIND&amp;quot;'&gt;
        &lt;!--
        Show image as background to text. You can't really calculate the width
        reliably in JS because margins are not taken into account by any of
        clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
        width if the user is using shrink to fit.
        This results in a margin-width's worth of pixels being cropped. If the
        user is not using shrink to fit then we expand the header.
        --&gt;
        &lt;b:if cond='data:mobile'&gt;
          &lt;div id='header-inner'&gt;
            &lt;div class='titlewrapper' style='background: transparent'&gt;
              &lt;h1 class='title' style='background: transparent; border-width: 0px'&gt;
                &lt;b:include name='title'/&gt;
              &lt;/h1&gt;
            &lt;/div&gt;
            &lt;b:include name='description'/&gt;
          &lt;/div&gt;
        &lt;b:else/&gt;
          &lt;div expr:style='&amp;quot;background-image: url(\&amp;quot;&amp;quot; + data:sourceUrl + &amp;quot;\&amp;quot;); &amp;quot;                      + &amp;quot;background-position: &amp;quot;                      + data:backgroundPositionStyleStr + &amp;quot;; &amp;quot;                      + data:widthStyleStr                      + &amp;quot;min-height: &amp;quot; + data:height                      + &amp;quot;_height: &amp;quot; + data:height                      + &amp;quot;background-repeat: no-repeat; &amp;quot;' id='header-inner'&gt;
            &lt;div class='titlewrapper' style='background: transparent'&gt;
              &lt;h1 class='title' style='background: transparent; border-width: 0px'&gt;
                &lt;b:include name='title'/&gt;
              &lt;/h1&gt;
            &lt;/div&gt;
            &lt;b:include name='description'/&gt;
          &lt;/div&gt;
        &lt;/b:if&gt;
      &lt;b:else/&gt;
        &lt;!--Show the image only--&gt;
        &lt;div id='header-inner'&gt;
          &lt;a expr:href='data:blog.homepageUrl' style='display: block'&gt;
            &lt;img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &amp;quot;_headerimg&amp;quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/&gt;
          &lt;/a&gt;
          &lt;!--Show the description--&gt;
          &lt;b:if cond='data:imagePlacement == &amp;quot;BEFORE_DESCRIPTION&amp;quot;'&gt;
            &lt;b:include name='description'/&gt;
          &lt;/b:if&gt;
        &lt;/div&gt;
      &lt;/b:if&gt;
    &lt;b:else/&gt;
      &lt;!--No header image --&gt;
      &lt;div id='header-inner'&gt;
        &lt;div class='titlewrapper'&gt;
          &lt;h1 class='title'&gt;
            &lt;b:include name='title'/&gt;
          &lt;/h1&gt;
        &lt;/div&gt;
        &lt;b:include name='description'/&gt;
      &lt;/div&gt;
    &lt;/b:if&gt;
  &lt;/b:includable&gt;
            &lt;b:includable id='description'&gt;
    &lt;div class='descriptionwrapper'&gt;
      &lt;p class='description'&gt;&lt;span&gt;&lt;data:description/&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/b:includable&gt;
            &lt;b:includable id='title'&gt;
    &lt;b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'&gt;
      &lt;data:title/&gt;
    &lt;/b:tag&gt;
  &lt;/b:includable&gt;
          &lt;/b:widget&gt;
        &lt;/b:section&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='header-cap-bottom cap-bottom'&gt;
        &lt;div class='cap-left'/&gt;
        &lt;div class='cap-right'/&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>