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.
-
That was my first attempt at CSS, woot!
-
Nice work Allen! And another first--your tip is our first community tip for customizing Help Center! Woot woot! Thanks for sharing.
-
Hi Allen,
This is a great tip! Do you know how I can get the photo to only appear on the background of the main page and not the other pages?
Best,
John
-
Hi John!
Glad you like it, we still get complements on our support site's look.
The answer to your question is two part:
First we need to set a set a page ID (see homepage-id.png)
<body id="homepage">Then in the CSS we define the background page with a scope just to that ID (see background-code.png)
#homepage {background-image:url('//path/to/background.png'); background-repeat: no-repeat; background-attachment:fixed; background-position: bottom right;}That should get you fixed up!
Best,
-Allen Hancock
-
Thanks, Allen!
-
Very Nice! I've also put a background image on our new helpdesk system, so it matches our main website many thanks for the tip!
-
Hi Guys,
Although I know how to upload assets and apply the CSS im struggling to find where the background is referenced and therefore I do not know where to place that body text - anyone help?
Many thanks
-
Ray, for the template I'm using, I added the background at around line 15, see attachment (I've removed the storage no's for the template for privacy reasons)
-
Thank you very much for your help Sarah :) I had tried that earlier but forgot to remove a tag! typical!
-
Hello All,
I seem to have followed the directions for the most part, but my background image is still not showing up. I've added the image to the assets folder, and then inserted the code on line 15 as specific earlier.
Any thoughts as to why my image is not showing? Attached are some screenshots
-
@Brandon - Change your background URL like the example below.
background: url(/hc/theme_assets/123456/123456/front.jpg);
-
Tried that, still not seeing anything after hitting preview / with a publish & refresh. Here is what I'm looking at now. Thanks in advance Wes.
-
@Brandon - Is your Help Center public so that I can see the page and see if you have any errors. If so please post the link as its hard to troubleshoot without seeing the page.
-
@Brandon - In your CSS file you need a semicolon at the end, after your background.
add a semicolon after line 15 of your CSS and your image will show.
-
Silly mistake, thanks Wes.
-
@Brandon - Not a problem and goodluck.
-
Hi Wes,
I have the same problem as Brandon and do not see the image when I preview it on the Help Center after inserting the code. I am sure there is a silly mistake but I cannot see it.
I have tried
background:url(/hc/theme_assets/314151/200012197/4pagecover1.tif);
and
background-image:url('//p4.zdassets.com/hc/theme_assets/314151/200012197/4pagecover1.tif');
I also tried not using the #homepage {....
and placing the code on its own and also between body {
and
color: $color_4;
font-family: $font_2;
font-size: 13px;
font-weight: normal;
line-height: 2;
margin: 0;We are preparing the Help Center for release next week so it is not yet active. The account is support.oneworldaccuracy.com
Would you have any tips or recommendations as to what I am doing wrong when trying to upload the background image?
Here is a screen shot.
Thank you very much for your help!
-
Hi Ana - Its hard to tell from looking at the screenshot. Its hard to troubleshoot without seeing your Help Center so that I can see all the code. The only thing I see in your CSS image above is that should be in your HTML and not your CSS. Move the code to the HTML tab on the first line and let me know if that fixes it.
-
I see it striped out my HTML code that I wrote. Move the body id= homepage to the HTML tab\Home Page first line.
-
Hi again,
I apologize for my lack of HTML and CSS knowledge.
Following your advice I put the section of in the HTML tab in the first line at the Home page. The rest of the code with
#homepage { background:url(/hc/theme_assets/314151/200012197/4pagecover1.tif);
should it be in the CSS or HTML section? I have been testing multiple options and combinations but I still do not get it to work.
I think I will let you know once my help center is active so it is easier for you to take a look and trouble shoot. Because at this time I am not sure what I am doing :S
Thank you so much for your help!!! -
@Ana - please let me know once your HelpCenter is active and I'll be glad to take a look. What you have above should be in the CSS file.
-
Hi Wes,
Our HelpCenter is active now. the address is http://support.oneworldaccuracy.com/hc/en-us
I would really appreciate if you can figure out what I am doing wrong.
-
@Ana - First off please remove the .tiff image and upload either a JPG or PNG as your background image.
Remove out of your CSS file.
Let me know when this has been done and I'll take another look.
-
Hi Wes,
Changing to a JPG did the trick!! Now I just have to figure out the correct size of the image to make it look like I want.
Thank you very much for your help :)
-
@Ana - Glad to hear. .tiff files do not do well in browsers. Just took a quick look at your site and I see you have a image there now. You can add the background to different elements depending on where you want the image to show up. For example if you want the image show up below your header then you can do that. Here is an example on my test site where I'm using a full background images with a slider.
-
I was having issues with the image not displaying properly on all pages because I had the background information in the BODY instead of the HTML. So I moved the following CSS to my HTML tag and no more issues.
background: url("//p2.zdassets.com/hc/theme_assets/47685/200073670/winstonbackground3.png") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -
This was amazing! I have no background in working with this kind of code and I did it.
I have just one question: can you change the size of the background image in the code?
Thanks :)
-
@Steffi - This may be moot but you can use this coding to adjust the backgroung image size:
background-size: XXpx XXpx;
(XX represents the pixel size)
Additionally, as a non-coding option, you can use any third party site to adjust the size of the original image. I use http://www.resize.it/
-
Thanks for the tip, Michael! :)
投稿コメントは受け付けていません。
35 コメント