story #16211 Set a header background image
Project administrator
Set a header background image

Users know better which project they are currently browsing.

story #16210 must be done before implementing this one.

After a project admin has chosen the image in a defined and limited library, it will be shown on each screens of the project. If the image is dark, the text displayed on top will be white (and vice versa 2118-screenshot-2020-08-10%402x.png ).



  • [ ] Does it involves User Interface? 
  • [ ] Are there any mockups?
  • [ ] Are permissions checked?
  • [ ] Does it need Javascript development?
  • [ ] Does it need a forge upgrade bucket?
  • [ ] Does it need to execute things in system events?
  • [ ] Does it impact project creation (templates)?
  • [ ] Is it exploratory?
Benjamin Dauton (bdauton)
2020-10-14 16:25
2020-08-10 23:57

Referencing story #16211

Git commit


Display background image in project (dashboard & admin only) 380aa2a4d8
Fix active/hover state when there is a background 90c7b31f18
Project admin can choose the background (Frontend) 8999496c6e
The header background of a project can be set or removed from a REST endpoint 3e53973152
Feature flag to hide background on all pages but dashboards 686bf40ddb
Display error page if user is using IE11 a9fa4aee46
Refactoring: use named constructor instead of subclass ebe6e81ef0
Display background on every pages of the project d2d08e9139
Style adjustement after first iteration of Design feedback 291fbf949b
Display project background in trackers (Episode I) 1c2f71a6bd
Always display background in project admin 9f31691ad5
Project header background can be modified form the project administration c05b22872c
Changing the header background displays a success message fd06d9146f
Add introductory message in background selection f5b219a822
Refactoring: do not repeat no-repeat 9edc2ea613
Make sure only valid identifier can be used to instantiate the ProjectBackground class 060bfe3db7
Fine selection of project background 217b2019d1
Fix breadcrumb and text style in projeect header when a background is used b6de02bb2c
Submit button should be visible on change 552b56380b
Encode header backgrounds with the photo preset of the cwebp encoder 56080be3cd
Use fa-lock-open instead of fa-unlock for project privacy 35923de538
Try to not load large header background image on small screen 3c3d39ce90
IntersectionObserver instead of resize/scroll event listeners bbb22fa021
Provide tulip background 0206dbc937
Fix dominant color of tulip background 4d15c538de
Remove text shadown from breadcrumb dropdown item 0bf05a68f7
Remove text shadown from breadcrumb dropdown item section b368981a83