Background image display on mobile and tablet devices

Background image display on mobile and tablet devices

by Gary Marsh -
Number of replies: 4

MOODLE Version:     2.9.4+ (Build: 20160225)

I don't know how to determine the theme versions but they were installed in October, 2015.

I am using the More Theme for 'site' and the Clean Theme for courses.

I am showing an image for the More theme background and because the 'enabledevicedetection' setting must be unchecked to use a different theme for courses, the site background image is not displayed on mobile and tablet devices.

Is there a way to display the site background image on mobile and tablet devices, while using a different course theme?


Average of ratings: -
In reply to Gary Marsh

Re: Background image display on mobile and tablet devices

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

First of all Course themes take precedence over the site theme. So if the course is viewed and is using Clean theme then the background of the site will not show up.

However if your site pages, such as the frontpage and login page are missing the background then this may be because the image file is too big and so the mobiles wont have space for it as it will take up too much data. 

Is there a link to your site to test this out?  Seeing a website is easier to find out what is happening and easier to diagnose the problem and suggest a fix for it. So if you could send me a link via a message, that would be great. Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Background image display on mobile and tablet devices

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Thank Gary for the link to your website.

I have took the liberty of creating a smaller seemless tile of the background you are currently using. This is so that you can use a smaller file that will repeat itself rather than be one giant image.

The file I have attached is about 30,4KB your original was about 790KB.

Anyway its worth a try. You just need to set the background-repeat property to 'repeat'

Cheers

Mary

Attachment ocian_blur_seamless_tile.jpg
Average of ratings: -
In reply to Mary Evans

Re: Background image display on mobile and tablet devices

by Gary Marsh -

Thank you Mary;

Your image adjustments works perfectly on all devices.

Question:   If I want to have a background image display on all devices with the background-repeat property set to 'no-repeat', what would be the background image size considerations?

Average of ratings: -
In reply to Gary Marsh

Re: Background image display on mobile and tablet devices

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Gary,

Great that it worked with the smaller image.

I'm not that sure what is the best size but here is an article from Smashing Magazine which I am sure you will find useful, in that it explains the best options for responsive images. Its a bit outdated '2013' but the information in it is still relevant today.

https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/

Cheers

Mary

Average of ratings: Useful (2)