Backgrounds are tricky and the video doesn’t go into all the options and considerations you need to take. I’ll address more of these considerations in future videos, but for now – some of the key things you need to know to get the most out of your background images in your browser theme are listed below the video.
- You can use multiple images in your theme and they can be layered on top of each other or side-by-side
- IMPORTANT: The preview in the theme creator is 1280 pixels wide. Many users will see this size, but a lot of monitors are wider and some smaller. Test your theme to make sure it looks good at different sizes and Modify until it looks good at several resolutions.
- Background images are anchored right – meaning they will stay in the same position relative to the right side of the browser if you make your browser window bigger. (By contrast, Logos are anchored left and will stay to the left side of the browser if it’s made bigger.)
- Always choose a background color just in case your image isn’t wide enough to account for a super-wide browser.
- Blend into that background color by having your image fade out on the left.
- Don’t use images that are too busy, or if you do, only use them in a small section of the theme. Your images will show through tabs and toolbars in Firefox and the text on those items needs to be visible.
- Avoid a white background as the default browser text is white and this will make legibility hard for your users.
- Be creative, experiment and change if it doesn’t work.
The background images are the most prominent part of your interactive browser theme, so give it the attention it deserves.
