Background image isn't fixed on Mobile

  • Using the desktop browser (Safari on OSX – current latest) when I choose sizes of window area on my boxed mode site with background image the image remains fixed during scrolling, which is as expected. This happens is I just shrink the window down to mobile size, or use the presets in the responsive layout tool. perfect, and as expected.

    But when I use an iPhone or iPad to view the content, then the background image is no longer fixed, it a) stretches to suit the length of the page in total (which results in weirds on infinite scrolling blog pages), and b) scrolls with the rest of the content, c) means the image is a different size on every page

    I have tested on a Windows phone (using Windows 10 Preview OS and the Edge Browser) and it works fine. I don’t have an Android device to check. What can be done to make the background fixed for iPhone users?

    site: spire computing.co.uk

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author pacethemes

    (@pacethemes)

    Can you confirm your IOS version and the browser you are using in IOS ? Also is it possible to take a screenshot of the site on an iPhone and post it here ?

    Thread Starter stuffe

    (@stuffe)

    Same on 7.1.2, 8.4, 9.0 (Beta). Screenshots from iPhone 6 running 9.0, they show (A) a long page where the spire in the background is barely visible and really stretched out and pixeled, to (B) a shorter page where you can see more, but it’s still stretched, and finally (C) what it looks like in the desktop simulator (which is what it looks like on Windows Phone 10 Beta, but I haven’t worked out how to screenshot that yet).

    (A)
    <img src=”https://i.imgur.com/Mf26R5x.png&#8221; title=”source: imgur.com” />

    (B)
    <img src=”https://i.imgur.com/cCOVTsc.jpg&#8221; title=”source: imgur.com” />

    ?
    <img src=”https://i.imgur.com/fDFADU2.png&#8221; title=”source: imgur.com” />

    Thread Starter stuffe

    (@stuffe)

    (D) iPhone, homepage, scrolled down to near bottom showing heavily pixellated stretched version
    [img]https://i.imgur.com/jOra0jm.png[/img]

    (E) Windows Phone 10, scrolled to same place, showing proper fixed image without scaling or stretching
    <img src=”https://i.imgur.com/hckcGfk.png&#8221; title=”source: imgur.com” />

    Theme Author pacethemes

    (@pacethemes)

    OK the issue is because of the height of your logo, do you have a smaller logo for mobiles ? If yes i can provide you a workaround

    Thread Starter stuffe

    (@stuffe)

    Happy to go smaller on the mobile logo ??

    Theme Author pacethemes

    (@pacethemes)

    Ok, so this is going to need a bit of tinkering from your end :), i hope you created a child theme, if not create one now and copy the header.php file from the theme fodler to child theme folder, edit line 59 as below
    CHANGE FROM

    <h1 class="logo">
							<a href="<?php echo esc_url( home_url() ); ?>">
								<img src="<?php echo esc_url( $logo ); ?>"
								     alt="<?php bloginfo( 'name' ) ?> | <?php bloginfo( 'description' ) ?>">
							</a>
						</h1>

    TO

    <h1 class="logo">
							<a href="<?php echo esc_url( home_url() ); ?>">
								<img src="<?php echo esc_url( $logo ); ?>"
								     alt="<?php bloginfo( 'name' ) ?> | <?php bloginfo( 'description' ) ?>">
							</a>
						</h1>
						<h1 class="mobile-logo">
							<a href="<?php echo esc_url( home_url() ); ?>">
							<img src="YOUR_MOBILE_LOGO_IMG_SRC_HERE" />
							</a>
						</h1>

    Once you make the above edit, time to add some CSS, add the below css in the child theme style.css file

    @media (max-width: 768px){
	.logo{
		display: none;
	}
	.mobile-logo{
		display: block;
	}
}
@media (min-width: 768px){
	.mobile-logo{
		display: none;
	}
}

    Let me know if you still see any issues

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Background image isn't fixed on Mobile’ is closed to new replies.