Adding background images to your quizzes
You can customize the look of your quiz or learning materials by adding a background image, icon, GIF or logo.
Adding background images to your quiz can reinforce your brand, enhance its visual appeal and help convey your message effectively.
With FlexiQuiz quiz maker, you can add different images to various pages and choose from several layout options.
How to add a background image
- To start, make a quiz or edit an existing one.
- Next, go to the Configure tab and select Theme from the left-hand menu.
-
Now scroll down the page to the Background images section.
-
Choose the page where you want to add the background image and tick the box in the Display column. These are your options:
- Quiz page: This includes question, text/media pages and registration pages.
- Sell page: Landing page for selling a single quiz.
- Welcome page: Introduce your quiz and share important information with a welcome page.
- Thank you page: Share information at the end of the quiz.
- Results page: Share results including score, grade and time taken.
-
In the Layout column, press the drop-down menu and select how you want your image to appear:
-
Tile: Repeats your image to match the height and width of your page, much like a mosaic. The number of times that the image repeats will depend on the size of the image and screen. For the example below, we used an image that is 200px wide.
-
Fit: Adjusts your image to fit the size of the page with the aspect ratios fixed. The whole picture might not show depending on the screen size.
-
Fill: Automatically adjusts your picture to fill the page and the aspect ratios are not fixed. The whole image will show but it could be slightly distorted.
-
Tile: Repeats your image to match the height and width of your page, much like a mosaic. The number of times that the image repeats will depend on the size of the image and screen. For the example below, we used an image that is 200px wide.
-
To upload your image, click the green Browse button and select the file you want to upload. The file must be:
- A JPEG or PNG file
- No more than 10MB. However, please note that large files might impact the performance of the quiz if your users do not have a great internet connection. To help ensure a good experience for your users, you can compress the size of your file using tools such as Tinypng.
- Once the file has uploaded, you will see a thumbnail of the image. You can check how the image looks on the page by pressing Preview on the top right.
- You can also customize fonts and navigation buttons to ensure you have the right amount of color contrast from the image.
Top Tips for using background images
When adding background images to a quiz or your learning materials, it's important to remember that the visuals should enhance the content without distracting or hindering readability. Here are some top tips to consider:
Clarity and Readability: Ensure that the background image doesn't make it difficult to read the quiz questions or answers. Choose images with neutral tones or consider using overlays to maintain clarity.
Consistency: Keep a consistent theme throughout the quiz. If you're using background images, make sure they align with the overall theme or topic of the quiz.
Branding: If applicable, incorporate branding elements, such as logos or colors, to reinforce the organization's identity.
Relevance: Choose background images that are relevant to the subject matter. This can help set the context and make the quiz more engaging.
Avoid distractions: Be cautious about using overly busy or distracting images. The primary focus should remain on the quiz content.
Test responsiveness: Ensure that the background images are responsive and display well on different devices and screen sizes.
Inspiration
These are some of our favorite quizzes with background images:
Christmas fill-in-the-blanks quiz
Relevant help guides:
Summary of FlexiQuiz page types
How to change background colors
Blog: Seven ways to style your quiz
Back
