WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. CarltonBale
    Member
    Posted 3 months 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 3 months 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 2 months 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 2 months 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 2 months 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 2 months ago #

    Hi!

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

  7. CarltonBale
    Member
    Posted 2 months 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 2 months 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 2 months 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 month ago #

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

Reply

You must log in to post.

About this Plugin

About this Topic