Set a page background image in Help Center

35 Comments

  • Allen Hancock
    Comment actions Permalink

    That was my first attempt at CSS, woot!  

    1
  • Jennifer Rowe
    Comment actions Permalink

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

    0
  • John Lafauce
    Comment actions Permalink

    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

     

     

     

    0
  • Allen Hancock
    Comment actions Permalink

    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

     

     

     

    1
  • John Lafauce
    Comment actions Permalink

    Thanks, Allen!

    1
  • Sarah
    Comment actions Permalink

    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!

    0
  • Ray Roocroft
    Comment actions Permalink

    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

    0
  • Sarah
    Comment actions Permalink

    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)

     

    0
  • Ray Roocroft
    Comment actions Permalink

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

    0
  • Brandon
    Comment actions Permalink

    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

     

     

     

     

    0
  • Wes Drury
    Comment actions Permalink

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

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

    0
  • Brandon
    Comment actions Permalink

    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.

     

     

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Brandon
    Comment actions Permalink

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

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Brandon
    Comment actions Permalink

    Silly mistake, thanks Wes.

    0
  • Wes Drury
    Comment actions Permalink

    @Brandon - Not a problem and goodluck.

    0
  • Ana Chavez
    Comment actions Permalink

    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!

    0
  • Wes Drury
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Ana Chavez
    Comment actions Permalink

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

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Ana Chavez
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Ana Chavez
    Comment actions Permalink

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

    1
  • Wes Drury
    Comment actions Permalink

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

    http://moderatorwes.zendesk.com

    0
  • Scott Dennis
    Comment actions Permalink

    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;
    
    1
  • Steffi Buyl
    Comment actions Permalink

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

    1
  • Michael
    Comment actions Permalink

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

    0
  • Jessie Schutz
    Comment actions Permalink

    Thanks for the tip, Michael! :)

    0

Post is closed for comments.

Powered by Zendesk