Set a page background image in Help Center
We were able to customize our Help Center with just a bit of CSS/Google-foo. I was able to add our trademark image as a faded background to our support articles.
In Help Center's CSS, I looked for the background, found it and referenced our custom image.
To edit the CSS for your Help Center, see Customizing the CSS or JavaScript.
The net result was the following:
body {background-image:url('//assets.zendesk.com/hc/theme_assets/65710/1931/watchman-zendesk-tower-gray.png');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: bottom right;}
You will need to upload the image to your Help Center. To do so, see Uploading and using your own assets.
This turned out to be much simpler than the "figure out how to override our CSS" method of customization which has flummoxed me with similar site designs.
https://watchmanmonitoring.zendesk.com/
Happy Zendesking!
-Allen Hancock
Watchman Monitoring, Inc.
-
I tried setting a background image on our knowledge base but kept having an issue where the bottom of the background image was being cut off when there was very little content in the main body area of the category, section and article pages.
I spent a ages trying to find a fix for this and eventually I found the only thing that worked was adding min-height: 900px; to the body { style within the CSS (see images for examples)
Before
After
Hopefully this will stop others having to spend hours looking for the answer and experimenting.
-
Thanks for sharing this, Neil!
-
If anyone can help with this, I greatly appreciate it. Here's what I did, according to the initial instructions. I added code starting with line 16 and ending line 21. What am I doing wrong?
-
You need to add the code to the CSS tab not on each page. This will automatically add the background to all the pages on your site rather than you having to add the code to each page yourself.
Basically the code tells the site to place this image on each page between the opening < body > tag and closing </ body > tag. As every page has to have opening and closing body tags it's automatically applied to all pages for you.
Hope it helps
-
Thanks for that. I should have clarified that I'm trying to add a background image into the top header area, behind the search window. Do you know how I would add that code into the css tab?
Post is closed for comments.
35 Comments