[Resolved] Responsive Body Background Image

Home Forums Support Responsive Body Background Image

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #226609
    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.

    #226664
    Tom
    Lead Developer
    Lead Developer

    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?

    #226672
    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.

    #226691
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to the site?

    #226703
    Dan
    #226716
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #226763
    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?

    #226809
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #227276
    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.

    #227371
    Tom
    Lead Developer
    Lead Developer

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

    I think your method is the right one πŸ™‚

    #227555
    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.

    #227599
    Tom
    Lead Developer
    Lead Developer

    Glad I could help!

    I like the default WordPress gallery mixed with the featherlight plugin πŸ™‚

    #228178
    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!

    #228188
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.