Changing the background depending on the device.

JefCurtis

Hi All,

First post for me. My new Smugmug site is coming along but I cannot figure out how to change the background to a black or simple textured background when the mobile site is active. Right now when looking at the site on a PC or Mac I use a fixed background but it ends up tiling that same background when on mobile or tablet and it looks awful and hard to read.

www.boneheads.smugmug.com

Is there a way to change this? Any help would be great.

Thanks in advance!

Jef

jfriend

JefCurtis wrote: »

Hi All,

First post for me. My new Smugmug site is coming along but I cannot figure out how to change the background to a black or simple textured background when the mobile site is active. Right now when looking at the site on a PC or Mac I use a fixed background but it ends up tiling that same background when on mobile or tablet and it looks awful and hard to read.

www.boneheads.smugmug.com

Is there a way to change this? Any help would be great.

Thanks in advance!

Jef

You can probably use CSS media query style rules to select a background image with CSS based on the current screen size.

Oso

Hi Jef.

I'm having same problem. I like my new site for desktop or laptop but on an iPad only a slice of photo is showing and looks kinda dumb. I read somewhere on SmugMug help pages there is no way of controlling how a background image appears on mobile devices but there should be way to over-ride as you say. Even Blogger offers different style for mobile and appears normal on tablet. Very disappointing SmugMug doesn't do likewise or is making it difficult to do.

Steve
[URL="Http://stevehymon.smugmug.com"]Http://stevehymon.smugmug.com[/URL]

JefCurtis

Oso wrote: »

Hi Jef.

I'm having same problem. I like my new site for desktop or laptop but on an iPad only a slice of photo is showing and looks kinda dumb. I read somewhere on SmugMug help pages there is no way of controlling how a background image appears on mobile devices but there should be way to over-ride as you say. Even Blogger offers different style for mobile and appears normal on tablet. Very disappointing SmugMug doesn't do likewise or is making it difficult to do.

Steve
[URL="Http://stevehymon.smugmug.com"]Http://stevehymon.smugmug.com[/URL]

Hi Steve,

Actually I did end up getting it to work with some CSS. I'm pretty sure something like this would work for you as well. I used a small texture image and tiled it when the screen size was small enough for say a smart phone but not a tablet or PC / Mac. Try that and see if it works. Mind you I'm no expert at CSS so I promise nothing!!

Good luck with your new site.

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
html.sm-user-ui {
background-image: url( YOURBACKGROUNDIMAGE );
background-repeat: repeat;
}


Love your website by the way. Great layout and beautiful shots!

paulbrock

Very handy, thanks!

Sent from my GT-I9100 using Tapatalk 4 Beta

Oso

Hey Jef;

Thanks for the kind words and for the code -- I tried it and it did work. I think big problem I was having was the image I originally chose had strong elements on far left and far right so never quite worked on iPad or iPhone screen. So...I just picked a different image!

My site still acts up a bit on iPad but mostly works, which for now is good enough. My hunch is SmugMug is going to need a while to figure out all the bugs on their new site. I like my new site better than old, but I wasn't very pleased how they rolled the whole thing without much instruction for folk like me.

Best,

Steve
SmugMug: http://stevehymon.smugmug.com
Blog: http://stevehymonphotos.blogspot.com/