Adaptable Background Image Not Centered

Adaptable Background Image Not Centered

by Milka Quin -
Number of replies: 5

Hello, we use Adaptable version 3.10.1.0 on Moodle 3.10.3 (Build: 20210325).

The background image in our header just does not center vertically. We used an image 1600 X 180 px and set the page header height to 120px since this is the best one to show most of the image on the header (72px just cuts it drastically). No logo. 

I appreciate the help on this!


Average of ratings: -
In reply to Milka Quin

Re: Adaptable Background Image Not Centered

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers 
.headerbgimage {
    background-position: center;
}

And the logo works for me:

Attachment Screenshot 2021-03-28 160959.png
Average of ratings: -
In reply to Gareth J Barnard

Re: Adaptable Background Image Not Centered

by Milka Quin -
Dear Gareth,
Thank you for the speedy response. I forgot to mention that the background image is not vertically centered when logged out. This is also the case in the log in page

Yes, we do not have any issues on the logo, we just did not use it. The custom Css you gave me actually helped center more the "logged in" view (which is now perfect)

.headerbgimage {
background-position: center;
background-size: 100% auto;
}

Hope you can help me resolve the "logged out" Background image.
Average of ratings: -
In reply to Milka Quin

Re: Adaptable Background Image Not Centered

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Cannot replicate (attached).  When you said 'no logo' I read that as you have a logo but it was not showing given that the original post is reporting perceived issues.
Attachment Screenshot 2021-03-28 182623.png
Average of ratings: -
In reply to Gareth J Barnard

Re: Adaptable Background Image Not Centered

by Milka Quin -
Dear Gareth,

It seems that the background picture zooms out when logged out or while in the log in page which causes the image not to be centered like how it is in your sample.

We have resolved it this on our end with the custom CSS for the header.

Thank you!
Average of ratings: -