Proximus Media GuidesBackground visual
Visual covering the full width of a section
Overview
The background visual covers the whole width of a section. It is usually decorative and do not contain any important information as it comes below any type of components or copy.
Accessibility
In this component, HTML elements are added on top of the image. This content is in positive or negative mode and this affects the creation of the image. Image colors should be carefully considered, with legibility and accessibility as paramount concerns.
Our websites and applications have to be accessible, meaning perceptible, operable, understandable and robust for users with disabilities. Discover here our accessibility guidance.
The visual presentation of text has a contrast ratio of at least 4.5:1. Success criterion 1.4.3 Contrast
Positive mode
Negative mode
How to
Please use the template and respect the following guidances:
- Produce the visual for each breakpoint: mobile (-s), tablet (-m), desktop (-l)
- Test your visuals and adapt if needed
- Make sure your visuals are not too heavy and compress if needed.
You're part of Proximus organization? Go to the template - If not, request it
Technical specifications
Sizes are for reference and guidance, note that they may change with the content or gridding. But in most case refer to the following specifications when you export the images:
| Breakpoints | Size | Max weight | Format |
|---|---|---|---|
| Mobile (-s) | 640x500px (height can be adapted for your needs) | 90KB | .jpg |
| Tablet (-m) | 1024x400px (height can be adapted for your needs) | 120KB | .jpg |
| Desktop (-l) | 2560x450px (height can be adapted for your needs) | 150KB | .jpg |
To ensure good UI quality and website performances, it's very important to respect the maximum weight indicated while keeping a correct image quality. Discover here our images compression recommendations.
Naming convention
When exporting your visuals, make sure you use the correct naming. Do not use caps, spaces, accents or symbols (except a dash - ) Please respect the following naming convention:
- Name Description of the visual, campaign or content
- Date yymm= year month (2108= August 2021)
- bg bg=background
- Breakpoint Mobile (-s), tablet (-m) and desktop (-l)
Images testing
Testing your image(s) is an important step of the images creation. It allows you to test the behavior in all breakpoint and to ensure the quality of the end results.
Discover here our images testing recommendations