cancel
Showing results for 
Search instead for 
Did you mean: 
dbourne
Learner

Background graphic using the rich content editor

Is it possible to set a background graphic to a few paragraphs of text using the rich content editor or HTML code?

8 Replies
chofer
Community Coach
Community Coach

 @dbourne ​...

Is there a reason you'd like to add a background graphic?  I ask because sometimes backgrounds can get pretty detailed, and deciding on a color of text to put on top of it can be a challenge...especially when there are multiple colors on the image.  There's nothing I'm aware of within the given Rich Content Editor tools that would let you set a background graphic.  You can add images to your content pages, but you wouldn't be able to place text on top of those images.  The only other thing I'm thinking you *might* be able to try is creating a table with some cells and try putting a background graphic in each cell.  I've not tried this myself, so I'm not sure it's even possible.  When I design pages...I try and design them so that the most number of people are able to view the content...so I stay away from backgrounds if possible.  Hope this helps.

Thank you Chris - I hear your point about designing content for maximum compatibility. I was simply trying to be fancy. I wanted my landing page to have a very faint background image under the 'overview' of a multimedia course. I thought I might be able to use a div tag to do this, but I am not clever enough Smiley Happy.

Hey, Debra! You could use PixTeller - Image Maker to layer images and text, and then you can use the Pixteller image in a page, assignment, announcement, etc. in Canvas. I use Pixteller sometimes to emphasize points in a lecture similar to the way magazines will pull a sentence to bold on a page. I hope that helps!

James
Navigator

 @dbourne ​

The best way to do this doesn't work. That's using the CSS property background: or background-image: with a url() value.

Theoretically, you could wrap your paragraphs in a <div> with a style, like this:

<div style="background: url('http://www.saintpatricks.nsw.edu.au/images/st_patricks_crest.png');">

<p>First paragraph</p>

<p>Second paragraph</p>

</div>

The background attribute is allowed by Canvas within a style tag, but for some reason when you include a url(), it gets stripped.

That probably is a good thing, though. Much of this is discussed in a similar discussion about getting background images on pages that you may find beneficial (or ultimately not): page background image .

One way to do it would be to add a class to the custom CSS for your account and then reference that class in the div statement. But as mentioned in the discussion on background images, that may cause unintended issues. Remember that what you do has to work across browsers and devices and within the mobile apps. If one of those doesn't display the background image, then the text over it may become unreadable.

BKINNEY
Community Member

In your sample code, the graphic's url is http, rather than https. Any chance that is why it failed? Most likely not, as you are saying it got stripped, but I thought I would ask. I agree this would be the best way, if it works.

scottdennis
Community Team
Community Team

Text over images, created in a photo editor can look good.  Here is one example I like:

Screenshot 2016-01-15 14.03.24.png

If you can use multiple separate images and responsive design, so much the better.

I typically do what you have demonstrated, Scott, and it works fine. In fact, the four smaller images can then be made into content links to take students directly to those modules - well, the first page of those modules is the best option.

One thing to note is that it may be necessary to play with the sizes of the images to make them work in a Canvas page. I prefer to do these first in any photo editing app, then try it in a Canvas page and play with the HTML code to get the best fit. I have also found that best-fit set as percentages rather than pixels helps to scale the images to other devices as James pointed out above.

Stefanie
Community Team
Community Team

 @dbourne ​, as it appears increasingly likely that your prompt will elicit a number of suggestions, none of which will be a single "correct answer," I'm changing the format to a discussion.