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

GODpleasers
OFFLINE
Premium Member
Posts: 111
Thanks: 2
Karma: -4

1 year 11 months ago #329272 by GODpleasers

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

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

Come worship Jesus with us..
GOD Speaks internet radio- :-)

- GOOD

- Music that employs life, deliverance, & restoration - COMPLETE :-)

godspeaksinternetradio.com/

Please Log in to join the conversation.

krileon
Team Member
ONLINE
Posts: 68454
Thanks: 9068
Karma: 1434

1 year 11 months ago #329277 by krileon

Replied by krileon on topic 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.

.cb_template .cbCanvasLayout .cbCanvasLayoutTop .cbCanvasLayoutBackground .cbImgCanvas {
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

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.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

GODpleasers
OFFLINE
Premium Member
Posts: 111
Thanks: 2
Karma: -4

1 year 11 months ago - 1 year 11 months ago #329278 by GODpleasers

Replied by GODpleasers on topic How can i get the canvas image to fit in the canvas area and not stretch or resi

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.

Come worship Jesus with us..
GOD Speaks internet radio- :-)

- GOOD

- Music that employs life, deliverance, & restoration - COMPLETE :-)

godspeaksinternetradio.com/

Last edit: 1 year 11 months ago by GODpleasers. Reason: just thougt of somthing...

Please Log in to join the conversation.

krileon
Team Member
ONLINE
Posts: 68454
Thanks: 9068
Karma: 1434

1 year 11 months ago #329279 by krileon

Replied by krileon on topic How can i get the canvas image to fit in the canvas area and not stretch or resi

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.

Please Log in to join the conversation.

GODpleasers
OFFLINE
Premium Member
Posts: 111
Thanks: 2
Karma: -4

1 year 11 months ago - 1 year 11 months ago #329280 by GODpleasers

Replied by GODpleasers on topic How can i get the canvas image to fit in the canvas area and not stretch or resi

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.

Come worship Jesus with us..
GOD Speaks internet radio- :-)