Mobile & Desktop Backgrounds For Pinnacle Premium

This topic is: Not Resolved

[Not Resolved]

This topic has 2 replies, 2 voices, and was last updated 10 years, 10 months ago by Ben Ritner.

July 5, 2015 at 11:47 pm

So I saw somebody ask this question for the Virtue theme, but I couldn’t find any posts specifically regarding the Pinnacle Premium theme…

Is it possible to have a different background for my site when it is viewed with a mobile device or on a desktop machine? I have a very large graphic on my site, which looks great on desktop computers. On mobile devices, however, the image is way too large — it basically only shows a portion of the image and that looks bad. I want the image to fill the whole background; I don’t care if it’s skewed out of proportion, I just need it to fill the screen with the entire image. It seems like the best solution at this point might be to use a different background entirely for mobile devices that is much smaller.

The current settings for my background image are: No Repeat, Fixed, Cover, Center Center. I’ve played around with all of the settings for the theme, there doesn’t seem to be a way to get the image to stretch correctly on both desktop and mobile devices that I can find.

The interesting thing is I can get the image to do what I want on pages I manually code with the following CSS code: “background-repeat: no-repeat; background-size: 100% 100%;”. I’ve tried manually targeting the <body> element with this CSS code, but for some reason that isn’t working on pages generated by the Pinnacle Premium theme. The image fills most of the screen, but some parts of the screen, particularly the footer, seem to fall outside of those boundaries.

I am wondering what the recommended solution is for handling this problem? Any suggestions would be wonderful. Thank you!

The forum ‘Pinnacle Theme’ is closed to new topics and replies.