How can i get the canvas image to fit in the canvas area and not stretch or resi

How can i get the canvas image to fit in the canvas area and not stretch or resi

It's not likely the various images a user will supply will fit cleanly there without the current CSS, which has re-positioning functionality. At any rate if you want it changed you'll need to adjust the CSS responsible for displaying the canvas. Below is the default positioning CSS.


You can use CBs built in CSS overrides functionality below to use the above with new styling rules to change this behavior.

www.joomlapolis.com/blog/kyle/18711-template-css-overrides-made-easy

For example you can change background-size to contain.

Ok so 1.) pasted and saved the CSS code here (see image) ...



Then I went to our test account and tried changing the canvas image that was originally 375px by 375pxand as you can see by the image it still stretched it out and not fitting in the canvas area (See image 2 still not fitting the canvas area)..



3.) the idea is i want that 375 by 375 image to fit in the middle of the canvas area leaving room for the member to reposition it left ,right, up or down if they want.

Also please would any newly uploaded images to keep there original size with the repositioning theory above for any member that uploads to their profile canvas..

So why isn't the doing want i want please help me.

You need to adjust the CSS for it to do that. The cover CSS size rule specifically ensures the space where the canvas image is displayed is covered. You can use contain as explained above if you don't want it to do that or use whatever CSS rules you want. Consult with your web designer as needed for custom CSS. We do not provide coding assistance here and it is currently working as intended and designed so there's nothing for me to fix there.

3.) the idea is i want that 375 by 375 image to fit in the middle of the canvas area leaving room for the member to reposition it left ,right, up or down if they want.

It is not designed to do that. The reposition functionality only allows repositioning in 1 direction depending on image size parameters. Additionally it's not an avatar, it's a canvas. It's meant as a background not some sort of critical image data.

Typically you'll want an image with a width of 2000 pixels and a height of at least 200 pixels for a good canvas background, but height doesn't particularly matter since repositioning can help deal with that. You will find squared images do not look great there since it's a landscape space.

krileon wrote: You need to adjust the CSS for it to do that. The cover CSS size rule specifically ensures the space where the canvas image is displayed is covered. You can use contain as explained above if you don't want it to do that or use whatever CSS rules you want. Consult with your web designer as needed for custom CSS. We do not provide coding assistance here and it is currently working as intended and designed so there's nothing for me to fix there.

3.) the idea is i want that 375 by 375 image to fit in the middle of the canvas area leaving room for the member to reposition it left ,right, up or down if they want.

It is not designed to do that. The reposition functionality only allows repositioning in 1 direction depending on image size parameters. Additionally it's not an avatar, it's a canvas. It's meant as a background not some sort of critical image data.

Typically you'll want an image with a width of 2000 pixels and a height of at least 200 pixels for a good canvas background, but height doesn't particularly matter since repositioning can help deal with that. You will find squared images do not look great there since it's a landscape space.

Can i get it to at least keep it original size and centered? If not can i totally how can i totally remove the canvas area?