• 0
Sign in to follow this  
Followers 0

How to display another background (type) on mobile devices?

Question

Posted · Report post

Hi there :) my fixed size large background doesn??t seem to work on mobile devices. Especially on my iPad it??s being scaled to fit the screen and my website looks awful. Perhaps there is away to disable the background or display it with different properties on mobile devices?

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

These two topics may help: http://www.pagelines.com/forum/discussion/17165/image-across-full-page-area/p1 http://www.pagelines.com/forum/discussion/comment/95575#Comment_95575 Alternatively, you can write custom code for the iPad, as shown in http://www.pagelines.com/tracking/wiki/Browserspecificcss%3AMainPage

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I try using custom css but it doesn??t seem to work :( After insatlling the specific css plugin, I try to deactivate the background for tablets, but my iPad still shows it. Has the .tablet command to bei whitin the {] oft the "body" css? What would be the proper code for deativating the background image and defining a new bg color for alle tablets and phones?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, i figured out how to deactivate the bg and change the color. I needed to apply #page-main in front of the rest of the code. Also had to place #branding to hide the bg behind the branding and #nav for the navbar. Right now my code looks like this: .tablet #page-main{ background-color: #e7e2d5; } .tablet #nav{ background-color: #e7e2d5; } .tablet #branding{ background-color: #e7e2d5; } Can i combine this in some way? Seems a bit clumsy the way it is.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Ashrai, Read through this post it should assist you. http://www.pagelines.com/forum/discussion/20438/alternative-background-for-ipad-css/p1

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks - but how do I disable the background completely? Is there an easier way like the one I used?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can hide the background using CSS. [code].tablet #branding { background-color: none;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay - and if I want that for page main, branding and nav? If I leave one of them out, the background picture only gets hidden partially. would it be #branding #page-main #nav .tablet {... } then?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It should be the reverse: [code].tablet #branding #page-main #nav {... }[/code]

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  
Followers 0