Set a page background image in Help Center | Community
Skip to main content

Set a page background image in Help Center

  • August 20, 2013
  • 35 replies
  • 0 views
Allen15

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.

    This topic has been closed for replies.

    35 replies

    Allen15
    • Allen15
    • Author
    • August 23, 2013

    That was my first attempt at CSS, woot!  

    Jennifer16
    • Jennifer16
    • August 23, 2013

    Nice work Allen! And another first--your tip is our first community tip for customizing Help Center! Woot woot! Thanks for sharing.

    J
    • John156
    • March 19, 2014

    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

     

     

     

    Allen15
    • Allen15
    • Author
    • March 20, 2014

    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

     

     

     

    J
    • John156
    • March 25, 2014

    Thanks, Allen!

    S
    • Sarah90
    • June 6, 2014

    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!

    R
    • Ray20
    • June 26, 2014

    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

    S
    • Sarah90
    • June 26, 2014

    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)

     

    R
    • Ray20
    • June 26, 2014

    Thank you very much for your help Sarah :) I had tried that earlier but forgot to remove a tag! typical!

    B
    • Brandon51
    • October 1, 2014

    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

     

     

     

     

    ModeratorWes

    @Brandon - Change your background URL like the example below.

    background: url(/hc/theme_assets/123456/123456/front.jpg); 

    B
    • Brandon51
    • October 1, 2014

    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.

     

     

    ModeratorWes

    @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.

    B
    • Brandon51
    • October 1, 2014

    https://www.urbanedgetenants.com/hc/en-us

    ModeratorWes

    @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.

    B
    • Brandon51
    • October 1, 2014

    Silly mistake, thanks Wes.

    ModeratorWes

    @Brandon - Not a problem and goodluck.

    A
    • Ana33
    • October 8, 2014

    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!

    ModeratorWes

    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.

    ModeratorWes

    I see it striped out my HTML code that I wrote.  Move the body id= homepage to the HTML tab\Home Page first line.

    A
    • Ana33
    • October 8, 2014

    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!!!

    ModeratorWes

    @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.

    A
    • Ana33
    • October 9, 2014

    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.

    ModeratorWes

    @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.

    A
    • Ana33
    • October 10, 2014

    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 :)

    Terms & ConditionsCookie settingsAccessibility statement