For the latest COVID-19 information, please go to our  coronavirus page. 

nau logo

campus

IN > e-Learning Center > ELC Tutorials

Better Images in Bb Learn

Basic

Have you ever noticed a Blackboard page where a really wide graphic forces the user to scroll left and right to view the content of the page? There's an easy fix. The simplest way to make graphics look better in Blackboard is to change them from fixed width and height to scaled. You do this by first embedding the graphic on the page using the Add Image add image button (third from left, bottom row of toolbar). Then click on the HTML button (bottom row, second from right of toolbar). You will see width and height values (in pixels) for the graphic, such as width="488" height="326". Change the width to a percentage, such as width="80%" and delete the height information. Click Update to save the change. Now the graphic will automatically resize depending on the size of the window, always taking up the percentage of the screen that you specified.

Another easy change lets you hang the graphic off the left or right side of the page. For example, type: style="float: right; width: 50%;"

Then, after the HTML code for the image, add some text in a paragraph like this: <p>text text text</p> This text will wrap around the graphic.

If you go back to edit the HTML later and discover a bunch of <span> and <font> tags, get out of HTML mode, select the text in the editor, and click the Remove Formatting remove formatting eraser button (top row, right side of toolbar) and save your changes. When you go back into the HTML mode, the formatting will be gone.


Advanced

The source code below will create a nice framed, text-wrapped, scaling figure in Bb Learn, with an italicized caption centered below. In technical jargon, you need to embed the CSS in-line, because Bb Learn strips out the header from the HTML. Throughout this tutorial, we are pointing at the same graphic. There is only one copy.

Just create a Blank Page or Item, go into the Code View by clicking the HTML button in the lower right of the toolbar:

blackboard toolbar

Saint Tropez and its fort in the evening sun

Saint Tropez

Image floated right, scaled to 33%

Copy/paste the following code into the HTML Editor:

<p>text above the graphic</p> <div id="figure" style="float: right; margin: 5px; padding: 5px; border-width: thin; border-color: silver; border-style: solid; width: 33%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p> </div><p>wrapped text beside and below the graphic</p>

Next, replace the image link and title info with those for your own graphics. You can also change the float from right to left, or change the width from 33% to anything you like.

How it works line by line:

Reference: http://www.w3.org/Style/Examples/007/figures.en.html


More Examples

Saint Tropez and its fort in the evening sun

Saint Tropez

Image floated left, scaled to 10%

Code for a left side version at 10% size:

<div id="figure" style="float:left; margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 10%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p>
<p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">This version floated left, scaled to 10%</p>
</div>

 


Saint Tropez and its fort in the evening sun

Saint Tropez

Image centered, scaled to 15%

Code for this centered version:
<center><div id="figure" style="margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 15%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">This version centered, scaled to 15%</p>
</div></center>

Code for a pair of images side by side in a single box. Each of the graphics is set to slightly less than 50% (you have to factor in the margin and pad) so they can sit side-by-side.

Saint Tropez and its fort in the evening sunSaint Tropez and its fort in the evening sun

Compare Image 1 and Image 2 and discuss their differences.

<center> <div id="figure2" style="border-width: thin; border-color: silver; border-style: solid; width: 75%;"> <img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="width: 48%; padding: 0.25em; " alt="Image 1" /><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="width: 48%; padding: 0.25em;" alt="Image 2" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Compare <a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Image 1</a> and <a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Image 2</a> and discuss their differences.</p>
</div> </center>

Saint Tropez and its fort in the evening sun

Saint Tropez

Image 1

Saint Tropez and its fort in the evening sun

Saint Tropez

Image 2

Code for a pair of stacked images in a single box:

<div id="figure" style="float:right; margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 12%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Image 1</p><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Image 2</p></div>