the courses should, and previously did, display a coloured background on all devices. all website pages, including courses, now display the more theme background image on the IPAD and cellphone BUT the laptop correctly displays the course background color. Now, the interesting and baffling results of the More Theme Custom CSS change.
The original issue is: the front page background image displays fully and properly on my laptop but only partially on my IPAD and my cellphone (landscape and portrait mode) and I'm trying to understand why and and how to make the More Theme background image device responsive. The image should scale without distortion, shouldn't it? The pixel resolution of the laptop screen is. Now I should point out that I created the the background image with physical dimensions that close enough match the screen size of my samsung cellphone. The More Theme background image is not behaving device responsive but page content throughout the website is device responsive. The More Theme, which provides the background image and is the general theme of the website. But before I outline the results, I need to repeat that the website involves two themes. I made the changes and the result is both interesting and baffling.
Thank you for your guidance on this background image issue I have. I am most grateful that Moodle support is as good as it is and thankful for your always sound advice. No need for a delay apology, we both have other Moodle issues that take time to deal with. This has been a perplexing problem for me to resolve and I'm hoping for suggestions. I would also like to experiment with Query Device Breakpoints but again, how do I state to the background image location? moodle/pluginfile.php/1/theme_more/backgroundimage/1525116824/FP-BG_Image.png, I don't see how this path will work in the url field above and I haven't been able to find where the background image file is actually located on the server but if I could, then perhaps I could use the server path to it. Developer Tools shows the background image path as.I believe the "" statements will go into the Custom CSS textarea but where does the body html statement "" go?.
Two questions on the above W3 example code Resize the browser window to see the effect. W3 Schools has plenty of good CSS Responsive information that I could try to put into the More Theme Custom CSS textarea but how do I relate the CSS statements to the background image that was dropped into the "Background Image - new files attachment" window? For example, I would like to try adapting this W3 coding example:ĭiv I added the into the More Theme Custom CSS field but that didn't make any difference.
I looked at the morecandy theme code you suggested but, to be honest, my brain is already saturated with coding that I'm struggling to understand and I wasn't able to spot anything that might help me. I'm still struggling to resolve the front page background image responsive device-width issue. If that will work and I store the banner image somewhere within the server moodle folder, is it possible to link to it within the moodle code rather than through the "Additional HTML Within Head" field?Ī solution to the Question 1 problem is important. I would rather store it on my private server, if that will allow the image to display outside of the login page. Currently I have it is privately stored at Photobucket and linked to it through the "Additional HTML Within Head" field. I have a site banner that needs to be located outside of the moodle website to display outside of the login page. Is it possible to have the front page background image to display 100% for all devices and if so, how? I have tried all the different Repeat options but without success. The problem is the image size displays differently on different devices ie. I have a front page background image that I dropped into the theme_more | backgroundimage field with "No Repeat" and "Position: Left Top". I am developing an educational moodle website on my private server using the More Theme for the website and the Clean Theme for the courses.