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

[ashrai 0]

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?

[Jenny 33]

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

[ashrai 0]

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?

[ashrai 0]

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.

[Danny 1,327]

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

[ashrai 0]

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

[catrina 103]

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

[ashrai 0]

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?

[catrina 103]

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