WordPress.org

Forums

Jetpack by WordPress.com
[resolved] Background Image - Fixed Position (non-scrolling) is being ignored (12 posts)

  1. CarltonBale
    Member
    Posted 1 year ago #

    The custom background in my full/parent theme carries over to the Jetpack minileven mobile theme with no issues. However, I have the setting "Background Attachment: Fixed" specified and it works fine in the full/parent theme, but not the mobile theme. I added Jetpack Custom CSS, but that didn't work either:

    .mobile-theme body {
    	background-attachment: fixed;
    }

    What changes do I need to make to get a fixed (non-scrolling) background image in the mobile theme?
    Full site: http://carltonbale.com/?ak_action=reject_mobile
    Mobile site: http://carltonbale.com/?ak_action=accept_mobile

    Thanks!

    https://wordpress.org/plugins/jetpack/

  2. CarltonBale
    Member
    Posted 1 year ago #

    I'm continuing to look but running out of ideas. It seems that the mobile theme functions.php file is importing some, but not all, of the settings from the full/parent theme and this causes the Jetpack Custom CSS to be ignored. I can't figure out a way around it through.

  3. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Hi! Did you manage to fix this? It looks ok to me right now, but maybe I am misunderstanding the problem.

  4. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Hi! Did you manage to fix this? It looks ok to me right now, but maybe I am misunderstanding the problem.

  5. CarltonBale
    Member
    Posted 1 year ago #

    Hi Richard. Thanks for your reply.

    Sorry, I deactivated the mobile theme over the weekend for testing and I just turned it back on. The background still scrolls and I can't figure out why.

    This is what shows up in the page source, despite my efforts to make it otherwise:

    <style type="text/css">
    body {background-color: #000000; background-image: url('http://carltonbale.com/wp-content/uploads/2014/04/home_theater_background_30.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: scroll;			}
    				#page,
    		#branding {
    			margin: 0.6em 0.6em 0.8em;
    		}
    		#site-generator {
    			border: 0;
    		}
    			/* If The user has set a header text color, use that */
    		#site-title,
    		#site-title a {
    			color: #ffffff;
    			}
    	</style>

    Thanks for any suggestions.

  6. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Hi!

    Again, the Mobile theme doesn't appear to be active. Where and how are you inputting that CSS?

  7. CarltonBale
    Member
    Posted 1 year ago #

    Hi Richard. The mobile theme is definitely active. I disabled caching to make sure it loads and it appears to be switching between the 2 versions now without issue.

    I set the background imaged to "fixed" in two locations: 1) the main theme settings and also in 2) the Jetpack Custom CSS plugin. When I make other CSS changes in either of these places, they propagate to the mobile theme properly. But not background attachment fixed. That CSS is overwritten with the code shown 2 posts above.

  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Since the .mobile-theme class is applied to the body tag itself, and not to a parent tag, .mobile-theme body isn't targetting anything. You'd need to use body.mobile-theme instead.

    I noticed you've also added !important rules. These are not necessary here, but if you use such rules, the exclamation mark has to be placed before important, like so: !important

    I would also recommend adding ; at the end of each one of your properties. Thus you'll avoid problems when adding a new property and forgetting to add that semicolon.

    In your case, adding this to your custom CSS should do the trick:

    body.mobile-theme {
        background-attachment: fixed;
        background-position: top center;
    }

    I hope this helps.

  9. CarltonBale
    Member
    Posted 1 year ago #

    Thank you Jeremy - this fixed the problem!

    I'm still not sure why this property wasn't inherited/detected from the full-site theme settings, but it's working now with the custom CSS, so problem solved.

    Thanks for the tip on the !important rules. I added them out of desperation just to see if they would help. Obviously, I didn't quite add them properly, and they wouldn't have helped anyway.

    Again, thanks for your help in resolving this problem!

    -Carlton

  10. rhoeffner
    Member
    Posted 1 year ago #

    This worked perfectly for me as well! Thank you both!

  11. dyakir
    Member
    Posted 4 months ago #

    i'm sorry. I'm a little slow here guys. I pasted that piece of code into the jetpack custom css but its had no effect on mobile. It works great on desktop and the background stays fixed, but mobile it just runs out as i scroll down.

  12. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 4 months ago #

    @dyakir Could you please start your own thread, as per the Forum Welcome?
    http://wordpress.org/support/plugin/jetpack#postform

    If you let us know your site URL there, we'll be able to take a closer look and see what's wrong with the CSS you added to your site.

    Thank you!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Jetpack by WordPress.com
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic