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

3 months 3 weeks ago #329272 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.

3 months 2 weeks ago #329277 by krileon
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.

3 months 2 weeks ago - 3 months 2 weeks ago #329278 by GODpleasers
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/
Attachments:

Please Log in to join the conversation.

3 months 2 weeks ago #329279 by krileon
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.


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.

3 months 2 weeks ago - 3 months 2 weeks ago #329280 by GODpleasers

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- :-) - GOOD :-) - Music that employs life, deliverance, & restoration - COMPLETE :-)
godspeaksinternetradio.com/

Please Log in to join the conversation.

3 months 2 weeks ago #329281 by GODpleasers
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?

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.

Moderators: beatnantkrileon
Time to create page: 0.195 seconds

Facebook Twitter LinkedIn