[Resolved] Responsive Body Background Image

[Dan]

Hello. Just got done updating and migrating my site to it’s server, and am now realizing the background image in the body isn’t responsive anymore. I have it set to No Repeat, Cover, and Fixed. It’s really large on any mobile device to the point it’s pixellated on a smartphone. Is there a fix for this? It used to be responsive, but it could be that it’s now on a new server or something. I had to go in and re upload a few images because they got broken in the migration, and this was one of them. Please let me know if you can help.

[Tom]

Hi Dan,

Background images aren’t responsive by default if they’re set to Cover and Fixed – it will change depending on the aspect ratio.

The pixelation shouldn’t be happening though – does it still happen if you disable the Fixed option temporarily?

[Dan]

That’s strange. I could have sworn it was responding to the screen size before the update. I just changed it to Attached, Fixed, Local & Inherit while still on Cover and it looks exactly the same on my phone. (obviously different on the desktop.) I wanted to go with Fixed so that there was no issue with repeating or height issues.

[Tom]

Any chance you can link me to the site?

[Dan]

Here you go. http://swizzlestickstudios.com/

[Tom]

Yea that doesn’t look great.

You can see this issue mentioned here: http://sixrevisions.com/css/responsive-background-image/

It’s due to the mobile devices having high resolution, and the height of your page being much larger than the image.

Check out the solution he suggests when it comes to mobile devices.

Let me know if you need more info 🙂

[Dan]

Okay, so here’s my confusion on this. On a computer, in Cover and Fixed mode, the background image sizes to match either the height or the width of the window. On the phone and iPad, the background image sizes to the height of the body of content instead of the window making it size all the way to the bottom of the content on any given page and then still stays fixed, giving you just the top portion of the image viewable. However, if you view it in the Customizer as Desktop, Tablet, or Mobile Device, it shows it sizing the image to the window of each, not to the size of the body of content. I compared the css code to the article you sent, and it matches almost exactly except for the background-position center part of it. So it should work the same, right? I think I may be missing something obvious here. What do you think?

[Tom]

I think what’s happening here is how the phone is rendering it. If I view your site on my desktop with the browser reduced to mobile size, it looks fine.

background-position shouldn’t change that, but you can try by adding center center into the position field.

I think you’ll need to do what the article suggests, setting a different background for mobile use only.

Or you’ll need to use a larger image which will work with the phone resolution.

Maybe try this:

@media (max-width:768px) {
    body {
        background-size: 100% 100%;
        background-position: center center;
        background-attachment: fixed;
    }
}

[Dan]

Okay. so I’ve come up with a temporary solution. I created a cropped image in the width of the original image. Cropped it pretty much actually. Then I added this code to my css:

@media (max-width:768px) {
		body {
			background-image: url(NEW CROPPED IMAGE URL);
			background-size: 100%;
			background-attachment: fixed;
		}
	}

It works for the desktop and phone, but for some strange reason the background isn’t in a fixed position on an iPad. I didn’t add anything in my code to tell it not to be fixed, so I’ll have to look into that some more.

[Tom]

I’m not sure if iPads/iPhones support fixed backgrounds, but I may be wrong.

I think your method is the right one 🙂

[Dan]

Thanks again for your continued help, Tom. You make using this theme so much easier. Now to start the search to see if I can find just the right gallery plugin that’s full screen in mobile format. Not really digging the NextGen Gallery plugin.

[Tom]

Glad I could help!

I like the default WordPress gallery mixed with the featherlight plugin 🙂

[Dan]

Okay, this might sound dumb, but I wasn’t aware that there was a built-in gallery within WordPress. Or are you saying there’s a plugin called WP Gallery or something like that and you use featherlight along with it? And thanks for your opinion!

[Tom]

There’s a built in Gallery function in WP: https://codex.wordpress.org/The_WordPress_Gallery

Then this plugin shows the full images in a nice lightbox: https://en-ca.wordpress.org/plugins/wp-featherlight/

Hope this helps 🙂

[Author]

Posts