Default Canvas Image thumbnail scaling

I am using a custom image as a default canvas image, with size 700 width x 200 height, which works well on the profile header. See attached first screen capture.

However on the member list output in grid format the smaller canvas' do not scale well they just seem to centre unlike when a user uploads a custom canvas image or selects a gallery canvas image. See second screen capture.

I have used the default thumbnail canvas image which I have created at size 350 width x 100 width but it makes no difference. SO I have two default canvas' nophoto.png and tnnophoto.png.

I can't seem to find the class .cbThumbCanvas in template CSS to make an override.

Is there anyway to get the default canvas to scale appropriately? Any help much appreciated.

It has the following CSS classes on it.

cbImgCanvas
cbThumbCanvas

You can use cbThumbCanvas specifically to reposition the canvas if you like. It uses the exact same CSS rules as profiles do though. Specifically the below CSS rules.


The position can be overridden though if the user uploads an image and repositions the canvas if it doesn't fit within the dimension limits. What you're seeing is just how the background-size: cover; style works. You can find details on how it works below.

developer.mozilla.org/en-US/docs/Web/CSS/background-size

Thanks Kyle,

That worked perfectly.

George