Blogger : How to fix missing Header Image in Mobile Template


The Blogger platform offers you different mobile templates for your site. You can choose between built-in templates (Simple, Picture Windows,…) or you can select a Custom mobile template, which will adapt your main template to the mobile version. This enables you to have a site with a consistent theme on both desktop and mobile devices. One part that might not be consistent though is with a header image. Depending on the options selected in the Layout section, the mobile template (either custom or built-in) might not show a header image. In this post, we will examine two ways to solve this problem.

Blogger - Header Image in Desktop Version
Header in desktop version

Blogger - No Header Image in Mobile Version
Header in mobile version

The problem of mobile template not showing a header image will only happen when you have a specific option selected in the "Configure Header" window in Layout section. One solution is to change to another option, the other solution (this only applies when using custom mobile template) is to modify template code. First, let's try to solve the problem by changing the option in the Layout section.

Note: To test a custom mobile template in a desktop, all you need to do is to append ?m=1 at the end of your URL.

Solution 1 – Remove description of the header in Layout Section

Go to Layout section. Under NavBar gadget, there should be Header gadget. For that gadget, click on Edit link.

A new window with the name “Configure Header” will open. This is where you set up your image header. At the bottom of the window you should have 3 options under Placement option:

  1. Behind title and description
  2. Instead of title and description
  3. Have a description placed after the image

configure header placement options

If you have 1st option selected, your image will not show in the mobile version of your site. If you don’t need to show a title / description in the header, then the solution is simple. Just select either the second or third option. Both of these options shows a header image in the mobile version of your site.

But what if you still want to keep option 1 or you want to use different image for a mobile version? In this case, the modification of a template code is necessary and this is discussed next.

Solution 2 – Modify Blogger Template Code

To keep an option 1 “Behind title and description” and still have a header image in mobile version, we need to modify the template code. This solution only applies to custom mobile template!!!!

Note:If you have never edited a template before or you are not sure how to switch your mobile template to custom, check my other post How to modify Desktop / Mobile Template.
  1. In Dashboard, choose Template section and then click on "Edit HTML" button.Blogger - Edit HTML Button
  2. Under “Jump to widget" dropdown menu, select Header1.
    Blogger - Jump to widget Header1
  3. The first line should start with a <b:widget> tag of id="Header1", something like this:
    <b:widget id='Header1' locked='true' . Expand it by clicking on the arrow located right of the line number as shown below:
    Blogger - Edit HTML Expand Code Line
  4. Line <b:includable id='main'> should show up. Expand it the same way by clicking on the arrow besides the line number.
    Blogger - Expand Code Line for id main
  5. After expanding, a lot of template code inside it will get revealed (more than 50 lines). In the code that just expanded, find the first <b:else/> line. Below it, you should find the code same or similar to the one below. This code shows your image, title and description for a desktop version. We need to copy that and put it inside the mobile part of the code. Select and copy those lines from your template.
            <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height                      + &quot;_height: &quot; + data:height                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
              <div class='titlewrapper' style='background: transparent'>
                <h1 class='title' style='background: transparent; border-width: 0px'>
                  <b:include name='title'/>
              <b:include name='description'/>
  6. Now move few lines up in the template until you find this line: <b:if cond='data:mobile'> and below it, there should be <div id='header-inner'>. Leave that line but remove everything inside it as marked below by yellow highlighted lines:
          <b:if cond='data:mobile'>
            <div id='header-inner'>
              <div class='titlewrapper' style='background: transparent'>
                <h1 class='title' style='background: transparent; border-width: 0px'>
                  <b:include name='title'/>
              <b:include name='description'/>

    Inside now empty <div id='header-inner'> paste the lines you copied from step 5. This will cause the header image, title and description to show in mobile version same way it does with desktop version.

  7. Click on “Save Template” button.

Using another image for mobile version of your template

Sometimes the header image for the desktop is not appropriate for mobile version of your site. In this case we can use the alternative image by referring to its custom URL. We do this by replacing first line in code from step 5 to be something like this:

<div style='background-image: url(YOUR_URL);background-position:left ; min-height:IMAGE_HEIGHT;_height:IMAGE_HEIGHT ;background-repeat: no-repeat;&quot;' id='header-inner'>

Just replace the following placeholders in the above code:

  • YOUR_URL to the URL of your image.
  • IMAGE_ HEIGHT to the height of your image.
    For example, if height is 400px, then the code would be min-height:400px;_height:400px;

If the image is not shown properly, modify the CSS background properties to fix them. If you are not familiar with them, check this article for basic information and for more comprehensive tutorial, check here.


If you want to keep consistency of your website between desktop and mobile versions in Blogger, you need to use Custom mobile template. If the header is configured, so that the image is shown behind title and description, the image will not be shown in the mobile version. This can be solved in two ways. Change the way image is shown regarding title / description or by customizing your blogger template.

I hope you found this article helpful. If so, consider dropping a comment or share it on social networks.



Click HERE to add your Comment
  1. Borei Design
    August 20, 2016
    • admin
      August 21, 2016
  2. Kenneth
    August 30, 2017
  3. sachin khandare
    January 24, 2018
  4. Mark
    December 31, 2018

Write a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.