add background image to header of boost default preset

add background image to header of boost default preset

by Deborah Orton -
Number of replies: 4

Using Moodle 3.6.2 localhost install on XAMPP.  Using Boost theme, default preset that came with the Moodle install. 

What I want to do is simply add a background image to the page-header, the same as I see it in the BoostImage preset, but without changing anything else on the  Boost default preset.scss

I copied the default preset and renamed it.  I then tried to add the #page-header .card {...} styling from the BoostImage preset to the bottom of the renamed default-preset, along with the #body#page-login-index {...} styling; changed the url for the image, but it does not show when I upload and select my modified preset.

I also tried adding all the BoostImage preset styling from /** page header notation to the end but that also did not work. 

I've purged the caches, browser as well but the image does not show.  I can change the size of the header, so I know something is working.

Could someone provide me with the simple solution of what to add to the renamed Boost default preset after all the //Import Everything notation?

I also checked the obvious of wrong url.  It is in a file named my-images so url reads url (http://localhost/sitename/my-images/header.png)

I'm baffled (which isn't too hard to do LOL) .  Thanks for any input.  I've attached the preset I've been modifying if it helps.


Average of ratings: -
In reply to Deborah Orton

Re: add background image to header of boost default preset

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

Hi, 

This line is wrong...

background: url( http:// http://localhost/sgsd/my-images/header.png);

it should read...

background-image: url(http://localhost/sgsd/my-images/header.png);
Average of ratings: -
In reply to Deborah Orton

Re: add background image to header of boost default preset

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 comment...this is wrong too. there is NO NEED to define body in this case as you have written it as the CSS ID SELECTOR is unique, so body is not needed.

body#page-login-index {
    background: url(http://localhost/sgsd/my-images/header.png);
    background-size: cover;
    background-position: center;
}

Also you need to use background-image 

#page-login-index {
    background-image: url(http://localhost/sgsd/my-images/header.png);
    background-size: cover;
    background-position: center;
}
Average of ratings: -
In reply to Mary Evans

Re: Moodle in English: Re: add background image to header of boost default preset

by Deborah Orton -
Mary, you are genius.  You always come through.  And such an obvious fix.

(face-palm on my part). Thank you so very very much. And thank you for the

correction on the body tag. Much appreciated.



On Tue, Mar 19, 2019 at 12:11 PM Mary Evans (via Moodle.org) <
Average of ratings: -
In reply to Deborah Orton

Re: Moodle in English: Re: add background image to header of boost default preset

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

You are welcome Deborah, glad it worked! 

Cheers

Mary

Average of ratings: -