Skip to main content
P
PBSOakley
Known Participant
January 30, 2017
Answered

How Can I make my Background Image responsive on Mobile and Tablets?

  • January 30, 2017
  • 6 replies
  • 941 views

I'm working on my new website and have a background that is fixed so it stays put when scrolling.  It works perfectly on the desktop, but does not work on mobile or tablets.  I'm a designer, not a coder, so it's probably something I did or didn't do. Can someone help?  Here's a link to the working site.

Point Blank Studio, Inc.

Thanks!

    This topic has been closed for replies.
    Correct answer ALsp

    Hi Anne,

    Apple iOS does not support fixed backgrounds, and it has some bugs with "cover" backgrounds. I've sent you an email with my suggestions.

    6 replies

    ALsp
    ALspCorrect answer
    Legend
    January 31, 2017

    Hi Anne,

    Apple iOS does not support fixed backgrounds, and it has some bugs with "cover" backgrounds. I've sent you an email with my suggestions.

    P
    PBSOakleyAuthor
    Known Participant
    January 30, 2017

    ok.  The container was not using PVII but everything else in it is.  I'll see if they have some advice. Thanks.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 31, 2017

    PBSOakley wrote:

    ok. The container was not using PVII but everything else in it is.

    OK.  Well if I were building this, I might do things differently.

    #container {

         margin: 0;

         padding: 0;

         position: relative;

         top: 0;

         background: #000 url(images/background.jpg) no-repeat center center fixed;

         background-size: cover;

         text-align: center;

    }

    Nancy

    Nancy O'Shea— Product User & Community Expert
    P
    PBSOakleyAuthor
    Known Participant
    January 30, 2017

    I did optimize the image, but it still does not stay fixed when scrolling on the iphone or ipad that I have.  What else might I need to do?

    P
    PBSOakleyAuthor
    Known Participant
    January 30, 2017

    plus it's still not resizing.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 30, 2017

    You must optimize images for the web first.

    Open your background in Photoshop. 

    Go to Image > Image Size and change width & height to 900px X 675px.

    That will reduce file size from 5.5 MB to 1.75 MB.   But we're not done yet.

    Next go to File > Export > ExportAs...   See screenshot.

    Format: JPG.

    Move Quality slider to around 48%. That will bring your file size under 100 KB which is much more web friendly for everyone.   Big files take forever to load.  And for backgrounds, you don't need much image quality.

    Results after compression:

    Replace your current background with the the one in your #container CSS code.

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    January 30, 2017

    You can make background-images work in mobile devices by adding them as an actual <img> in a fixed container behind your actual content. It take a little putzing around with the html, but it's not overly difficult.

    Here's a quick example that works...

    <!doctype html>

    <html lang="en-us">

    <head>

    <title>fixed background in mobile</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

    * {

    padding:0;

    margin:0;

    }

    .background {

    width:100%;

    height:100vh;

    position:fixed;

    background-color:red;

    z-index:1;

    }

    .content {

    position:relative;

    z-index:2;

    }

    </style>

    </head>

    <body>

    <div class="background"><img src="image.jpg"></div>

    <div class="content">

      All of your site content here...

      <p> </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et praesentium similique eum ipsa ut nulla modi aliquid officiis, eligendi tenetur soluta, dolorum sapiente accusantium, amet consequuntur illo provident ab ex. Omnis, illo! In voluptatibus perferendis laboriosam tenetur, mollitia dolorem quasi, minima delectus libero, explicabo neque quia dolor. Impedit veniam alias temporibus vitae maxime, eaque amet qui eum fuga omnis nam obcaecati optio repellat eveniet rem a accusamus natus reiciendis eius, id ipsum ab corrupti. Similique eligendi, non ratione aliquid! Similique facere, officiis consequatur possimus voluptatem, et nihil alias quo necessitatibus. Ea suscipit eligendi molestias id natus, quam excepturi at repudiandae reiciendis laudantium, beatae repellat eveniet doloremque accusamus dolore sapiente similique. Suscipit maiores voluptates quisquam incidunt explicabo accusamus aliquid quae corporis porro voluptate, aspernatur magnam dolor iusto ut fugit dolorem illum placeat qui omnis ex debitis autem aut laborum. Quis harum, consectetur modi quaerat atque facilis corporis debitis voluptas corrupti. Nisi, quasi. Similique laudantium autem quae praesentium numquam? Officiis libero odit nisi sit, repellendus ab nesciunt recusandae mollitia, quod. Excepturi totam, omnis veritatis praesentium sequi voluptate animi quae dolorem obcaecati fugit voluptas inventore aliquid ratione sit aliquam eos ipsam perferendis exercitationem. Optio labore debitis minus itaque accusantium. Est ad fugit aliquam iste, eveniet numquam corporis, nulla commodi delectus atque sed beatae odit illum iusto recusandae accusamus facilis nobis. At labore provident laudantium, tempore numquam molestiae quam sed consequuntur nesciunt dicta nobis iste laboriosam ad, quis cupiditate! Mollitia quidem iure optio in, ea doloremque. Pariatur animi ullam modi eaque provident numquam? </p>

    </div>

    </body>

    </html>

    pziecina
    pziecina
    Legend
    January 30, 2017

    Your background image file size will cause problem on mobile devices, 3.8 Mb is simply to large, and the actual image size is excessive.

    Use media-queries, (you have one in your css) to target an optimized image for mobile devices, preferably under 250kb.

    P
    PBSOakleyAuthor
    Known Participant
    January 30, 2017

    Thanks! what size do you recommend the image to be?

    I'm not a coder, so i don't really know how to target the image.  Can you direct me to some code or instructions on how to do that?

    pziecina
    pziecina
    Legend
    January 30, 2017

    I also noticed that you are using the layout builder from PVII.

    If I remember correctly, you can set the background image for various screen sizes in the actual dialogue for this program.

    If you are unclear on how to do this, you would be better advised asking in the PVII forums, though ALsp​ does occasionally look in on this forum.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices