Using backgrounds

This lesson covers the main aspects of background styling but the actual CSS code is slightly more complex. We have added a commented stylesheet to the download section that covers all the details.

 

Background images

When using background images there are a few things you need to keep in mind.

1. They are probably not available during the exam due to the possible restrictions mentioned under Limitations. You should as a backup always use a background color that is similar to the picture’s main color to ensure sufficient contrast.
   You will find this online tool helpful: https://matkl.github.io/average-color/.
2. They should not be larger than absolutely necessary. Consider using a compressor, for example with https://tinyjpg.com/.
3. If you want to use pictures that are stored in the item to overcome some of the limitations, you can do two things:
1. Export the item, add stylesheet and picture manually and re-import
2. Encode the picture as a data-uri, for instance with https://dopiaza.org/tools/datauri
   
   

Getting the scope right

In an earlier lesson we have been using html body div.qti-item to target an item. To change a background, your CSS would look like this:

 

html body div.qti-item {    background-color: #ddd;}

 

As you can see, the part of the test-runner surrounding the item stays white:

The highlighted zone is the item, the test runner remains white

 

To target the whole area you need to use this target instead:

html body.tao-item-scope { /* no space before the dot! */

    background-color: #ddd;

}

Note, that working on the test-runner scope should be done with care. It might have unwanted side effects such as influencing the style of the review bar.

 

Background images

Let’s say you want to use the following picture as a background:

 

Picture size	288 x 288 px
File size (uncompressed/compressed)	40kb/16kb
Average color	#2c2c2c
Data-uri	data:image/png;base64,iVBORw0KG... (shortened)
(fake) remote URL (if applicable)	https://example.com/background.png

 

Remote URL variation

html body.tao-item-scope { 

   background-image: url(https://example.com/background.png);

}

 

Local URL variation

Remember that you have to export and re-import the item in this case

html body.tao-item-scope { 

   background-image: url(../images/background.png);

}

 

Data-uri variation

html body.tao-item-scope { 

   background-image: url(data:image/png;base64,iVBORw0KG...);

}

 

Shorthand syntax

html body.tao-item-scope { 

   background: #2c2c2c url(any-of-the-above);

}