Add background image in totara

Add background image in totara

by Rahul Kumar -
Number of replies: 9

Hi, 

I am pretty new to Totara, so I am trying to play with basis theme in totara and would like to know that how to add back ground images for block, dashboard and front page in totara. 
I am using 11.2 version. 

I am adding a custom css to change background image Site Admin > Appearance > Theme > Basis > custom css. 
#page {background-image:url(C:Apache24/totara/theme/basis/pix/doctor.jpg)}

#page {background:url(C:Apache24/totara/theme/basis/pix/doctor.jpg)repeat}

But none of them is working. If you guys can help me out in this case it would be a very great help of yours.

I am looking forward to hearing from you .


Regards

Rahul

Average of ratings: -
In reply to Rahul Kumar

Re: Add background image in totara

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Of course it won't work when you write client side CSS that refers to a file on the server with a local file path reference!

I assume Totara is similar to Moodle, so https://docs.moodle.org/dev/Using_images_in_a_theme.

Average of ratings: -
In reply to Gareth J Barnard

Re: Add background image in totara

by Rahul Kumar -

Hi Gareth, 


Thank for your reply.

I am following the moodle documentation but its not appearing any background image on my totara site.

mention below , what I had done in my 

background-image:http://localhost/index.php?redirect=0([[pix:theme|rahulimage/test/med.jpg]]);

in Totara/theme/basis/style/settings-noprocess.css file and my image is in totara/pix/rahulimage/test/med.jpg


I am looking forward to hearing from you.

Thank you 


Regards

Rahul 


Average of ratings: -
In reply to Rahul Kumar

Re: Add background image in totara

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ok, why did you write this 'background-image:http://localhost/index.php?redirect=0([[pix:theme|rahulimage/test/med.jpg]]);' instead of this 'background-image: url([[pix:theme|rahulimage/test/med.jpg]]);' ? ref: https://www.w3schools.com/cssref/pr_background-image.asp. I think you need to learn to walk before you can run, so start learning the basics, such as: https://www.w3schools.com/css/default.asp and you won't make novice mistakes like this.

I don't know the differences that Totara has, but I imaging that 'settings-noprocess.css' will not be pre-processed and the this CSS does need to be, so you need to find the correct file.

Average of ratings: -
In reply to Rahul Kumar

Re: Add background image in totara

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

Hi Rahul, 

Normally in Moodle the background image is added to the body and NOT page, so your CSS would look like this.

body { background-image: url( /theme/basis/pix/doctor.jpg ); }

No need to add the word repeat as it is set as a default setting within the User Agent CSS which is in your Browser.

So try that and see if it works in your Totara site.

Cheers

Mary

PS: If you are adding this CSS into the Custom CSS section of the Basis theme settings then that’s OK, however, the alternative method Gareth gave you will not work, or did not work when using it in various versions of Moodle some time ago, but may work if your version is the latest which should be 3.5 Moodle equivalent. 

Average of ratings: -
In reply to Mary Evans

Re: Add background image in totara

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mary,

What do you mean 'will not work'?  'pix:theme' has been around for ages.  Ref: https://docs.moodle.org/dev/Using_images_in_a_theme#Using_images_within_CSS

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Add background image in totara

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

Hi Gareth, 

What i was alluding to, was the fact those types of coding elements did not work in the Custom Settings area of a Themes settings page, which is where Rahul was intending adding them. It’s ages since I used them, so that is why I said they may work in that scenario now.

I know they work in hard coded CSS within a a Themes stylesheets, which is where they were designed to work.

Hope this helps?

Mary

Average of ratings: -
In reply to Gareth J Barnard

Re: Add background image in totara

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

Further to my last reply...I have tested this in Moodle 3.5 and it still does not work if using the following notation.

background-image: url([[pix:theme|filename]]);

Where filename represents the name of the image file without the file type.

FOR EXAMPLE: flower.jpg would be written like so: [[pix:theme|flower]]



Average of ratings: -
In reply to Mary Evans

Re: Add background image in totara

by Rahul Kumar -

Dear Mary & Gareth, 

Thank you so much for your help.

Regards

Rahul 

Average of ratings: -