Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Participant

Embedded Image with Extra Border

Everywhere else this image looks like this:


When I embedd it into a quiz question it comes up like this:


This is occurring on many images.  I'm getting extra wide borders around the images.

I've tried changing the size of the image dimensions via the html code but that doesn't seem to fix the issue.  The image itself when created in Google Draw and saved as a jpg does NOT have extra space around it.

I'm finding my imbedded images sometimes are altered when they come in.  There appears to be no way to "edit" the image once its embedded into Canvas (in a quiz or anywhere else).

Ideas or suggestions, they look terrible ...

8 Replies
Community Coach
Community Coach

 @sbridge ,

When you saved the item, were you able to save it as a transparent image?  I know that this is something that is available in Photoshop and it eliminates the white boarder and background that us added to an image when it is flattened.


Community Participant

I don't have access to Photoshop.  Most of my "images" are saved into a Google Drive folder and are a variety of images either saved from various sources or created in Google Draw and saved as a jpg, or are a Google Draw file.

They look fine when I insert them into a Google Doc or Google Slide, etc but come out with weird borders and odd sizes when I embed them into Canvas via the Google App integration.

Community Coach
Community Coach

Hi  @sbridge ...

The Rich Content Editor (RCE) is a bit limited in what it can do for images (after all, the RCE is not a graphics editor like Photoshop, Illustrator, or Fireworks).  Another option for you might be to take a screen capture or snippet of what you are looking at in your Google account using the Snipping Tool in Windows.  This would allow you to save your image snippet as a *.jpg file...therefore removing any extra space that you didn't want showing in your course.

Community Champion

Not an answer I am afraid but recommend  which is a free online image editing tool. Allows you to crop images, save as different types etc.

Community Participant

I'm sorry to be dense or redundant but I think I HAVE edited my images appropriately.  Here is what the image in Google draw looks like on my screen, no extra border.  I've given you the whole screen shot so you can see what the image actually looks like.


However, when I embed the image into a quiz using the Google App/Drive triangle I would expect to get the image of the periodic table.  I'm getting the WHOLE screen.


Note, even my Google Icon and menu bar is showing up...that makes NO sense to me.  If I was to insert it into a google doc or slide, all I'd get is the image.  The IMAGE shouldn't include all the stuff on the screen.

Community Coach
Community Coach

 @sbridge ...

I've never used Google Draw, so I cannot speak to its functionality.  And, I've never seen where you can integrate it with this was a bit new/strange to me.  As a possible work-around, I would encourage you to try the steps I outlined for you yesterday using the Windows Snipping Tool.  That way, you are selecting just the part of the image you want, saving that image to your computer, and then uploading that image to your course.  You're not going to be connecting to Google in any way for the process that I've described above.  All your images would be saved within your course "Files". 

I hope this information will be of help to you, Stephanie.  Please sing out if you have any additional questions...thanks!

Community Champion

OK, so I tried to recreate this by following this You Tube video - Embedding a Google Drawing - YouTube 

Regardless of the embed size I chose, I still got an additional "border" around the image (this for 480x360 - I added in a black border to make the different clearer)


So it would appear that Google embeds the entire Canvas and not just the image on it eg:


I then reduced the Canvas size on Google Drawings by moving the image to the top left corner and dragging up the background by the bottom right:


So there was no background (in fact I dragged it beyond the image edge)


When I went to get the embed code I noticed that the small/medium/large options had changed (to reflect the canvas size no doubt):


When the image was pasted in I go this:


So I in fact over cropped the Screen size. I then repositioned the Canvas so it covered the image exactly:


I could not find any automated way to do this other than preposition the image to the top left and dragging the icon.

Once I copied and paste the embed code to the Canvas page it worked perfectly (and I could resize it on the page):



Then realised that it was a Quiz question you were doing so replicated it for that and got the same issues eg


I was not able to replicate getting the entire Google Menu, navigation, icons etc as per your original post though :O(

Hope this helps?

Community Coach
Community Coach

Hello  @sbridge ...

I am reviewing some of the older questions here in the Community, and I wanted to check in with you.  Have you had a chance to review our other feedback that we've posted?  Have you tried my suggestion or the suggestion offered by  @GideonWilliams  with his included screen shots?  It would be great to hear back from you to know if you found a solution or if you are still looking for help.  If you feel that one of our above replies has helped to answer your question, please feel free to mark that response as "Correct".  But, please let us know if you're still looking for some help on this question.  For the time being, I am going to mark your question as "Assumed Answered" mainly because there hasn't been any new activity in this topic since August 24, 2019.  However, that won't prevent you or others from posting additional questions and/or comments below that are related to this topic.  I hope that's okay with you, Stephanie.  Looking forward to hearing back from you soon.