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

Report · Jan 30, 2017

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!

Report · Jan 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.

Report · Jan 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?

Report · Jan 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.

Report · Jan 30, 2017

my background is in a ID "container". Will this work without me having to change that?

Since I'm not a coder, this is not so simple to follow, but I can try it.

Report · Jan 30, 2017

I tried to do what you suggested, but failed at it. The image was broken (didn't show up) What might I have done wrong? I'm assuming I was not suppose to replace my current <head> with exactly what you gave right? If I did that I'd really have to start from scratch. I'm trying to avoid that.

Report · Jan 30, 2017

I think you need to optimize images first. I really do.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 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>

<head>

<title>fixed background in mobile</title>

<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>

All of your site content here...

<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>

Report · Jan 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 & Moderator

Report · Jan 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?

Report · Jan 30, 2017

plus it's still not resizing.

Report · Jan 30, 2017

Except for the image optimization, it would be irresponsible for anyone to tell you what to do.

This is not because we do not wish to, but because you are using PVII layout builder. Looking at firefoxes dev tools tells use that the loading of the background image is being controlled by javascript.

Telling you how we would create css for various devices, may break your layout or interfear with what the layout builder is doing. That is why i advise you to ask on the PVII forum, (the makers of the Dw extension).

PVII, also has a number of exellent tutorials available on its site, explaining how to use each of its extensions.

Report · Jan 30, 2017

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

Report · Jan 30, 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 & Moderator

Report · Jan 30, 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.

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

1 Correct answer