Jump to content
Sign in to follow this  

Completely hide background image - mobile

Recommended Posts

jjc_vr    0

Hi there,


I'm currently trying to figure out how to hide a fixed background image for mobile (just iphone initially...)?


In the custom css area i've added (as per the documentation on the browser-specific CSS plugin):


body.iphone { background-image: none;


However, that doesn't seem to be working for me.


I've then had a look in Firebug and I noticed that the image has the style-id 'pagelines-page-bg', so I tried:


body.iphone.pagelines-page.bg {background-image:none;}


but still no luck.


Any clues? I'm kinda stuck until I figure this out...


Cheers and thanks

Share this post

Link to post
Share on other sites
Rob    547



May I have a link to the site? Thanks.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites
Danny    1,327



The background image is assigned to the body tag, therefore thats the reason why your code isn't work. If you inspect your website using Firebug or your browsers web dev tools, you will see that the image is assigned to the page-canvas div.


Therefore, you need to adjust your code to include .page-canvas.


For example:

body.iphone #page .page-canvas { 
background: none;

Please search our forums, before posting!

Share this post

Link to post
Share on other sites
jjc_vr    0

Superb work - thanks very much for your help.



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • kwaoru
      By kwaoru
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
      Looking forward to hearing from you.
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      can I limit the overall of MegaNav on mobile? When I look at michaelkummer.com on a mobile device, the menu takes up more than a third of the screen space. Using CSS to limit max-height doesn't seem to work. Is there another/better way to reduce the overall height to maybe 10% of the screen available?
    • Queue-it
      By Queue-it+
      Pagelines has great extension called "Tour guide", but on the mobile the sections don't break up in a user friendly way.  I attached an image with a mobile view, where the section is set to break with text-button - image instead of text-image-button. 
      Is there an easy way to change that sequence?