1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

working with background image

Discussion in 'Troubleshooting and Problems' started by Ryan Kent, Feb 27, 2011.

  1. Ryan Kent

    Ryan Kent Well-Known Member

    I am looking at the xenforo.css template trying to adjust my background image. I am just learning html/css and I've tried making changes unsuccessfully.

        @property "html";
        background: @veryDarkMonochrome url('@imagePath/xenforo/background_main.jpg') no-repeat;
        background-position: top;
        background-attachment: fixed;
        @property "/html";
        overflow-y: scroll !important;
    I have worked a lot today trying many things out. The problem I have is the background image starts at the very top of the page. The header and navigation tabs conceal the top of my image. I'd like the image to begin right after the end of the navigation bar border. I've tried working with the background-position property using %, and px adjustments. I've also tried padding but it seems that works for anything except the background image.

    Any ideas would be appreciated.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    background-position works well for this in my testing:

    background-position: 0px 127px;
    You might also consider setting a transparent header background like this. A picture showing the effect can be seen in this post.
    Bram and ArnyVee like this.
  3. Ryan Kent

    Ryan Kent Well-Known Member

    Jake, I can't thank you enough. I tried so many combinations but never with 2 px variables. And your suggestion of the transparent header is absolutely perfect!

    I am hoping I can impose on you (or anyone who is willing to share their experience) with some follow up questions. I reviewed a few threads including http://xenforo.com/community/threads/template-editing-and-more.10956/#navigation but I am still am struggling on finishing my header area.

    I am trying to learn all I can here and one of the obstacles is not knowing the formal names of certain areas of the portal page. Attached is an image of my site. On the left I placed text boxes indicating my guesses at the names of those areas. I am referring to the whole page horizontally speaking even though the boxes are located on the left side. Can you please let me know if my naming convention is correct?

    What I am trying to do now that you shared the transparent header idea (which I love and never considered!) is to make the top of my pages styled like the default XF style. The red lines indicate where I would like the Navigation bar (as I call it) and the ?sub-navigation area to end, and then to wrap like the default XF style into the form below. I've been looking to control the color of the background. I am sure it's in ACP > Style Properties. I also looked at several templates I thought would be helpful. I have tried adjusting the properties for anything reasonable I could find, but no success. Can you point me in the right direction?

    Also, I notice the rounded corners in the default style. For example, just left of the Home tab. How is that effect achieved? I checked every image in the styles/default/xenforo directory hoping to find something.

    Lastly, in the header area you will notice a logo that says "Tera PVP". I would like to center it. Again, I seemed to have searched everywhere I could think of but clearly missed the right spot.

  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    For reference:

    Screen shot 2011-02-28 at 9.50.58 AM.png

    The outside gap is the difference between the size of the browser window and the width of this class:

    Admin CP -> Appearance -> Style Properties -> General -> Page Width Controller

    The inside gap is the padding of this class:

    Admin CP -> Appearance -> Style Properties -> General -> Content

    The rounded corners on the navbar is the border radius on this class:

    Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Navigation Tabs Container

    See this post for centering the logo:

    Lykke and Oracle like this.
  5. Ryan Kent

    Ryan Kent Well-Known Member

    thx Jake. Your guidance led me to the right answers and my portal page is looking better then ever.​
  6. Ampd

    Ampd Member

    What size background image did you use? I am going to be doing something similar with my site.
  7. Ryan Kent

    Ryan Kent Well-Known Member

    At that time the image was 2772 x 1080. It was WAY too big, and had a size of 1.6mb. Ultimately I resized it down to 1900 width and was able to get the size down to 0.2mb with a satisfactory reduction in quality.

    When all was said and done, this background was a great learning experience for me. My two main learnings where:

    - backgrounds need to be small (space on disk) and certainly not more then 0.2mb max

    - backgrounds should be attractive but not distracting. That background is gorgeous, I still love it, but as readers eyes move from left to right their attention is taken off of the thread and onto the background. That image doesn't work well as a background.

    My current background is very small ?0.1mb, very well liked and not distracting. I would recommend taking a similar approach.
  8. Ampd

    Ampd Member

    How did you use the image is the whole background (header and footer as well) and how did you make it so the content scrolls, but the image doesn't. Just wondering because I may be using a custom image for my background.
  9. Ryan Kent

    Ryan Kent Well-Known Member

    Go to ACP > Style Properties > General. Chose the HTML tab.

    Choose a Color (in case your image does not load for whatever reason), then enter the Path to your image, usually @imagePath/xenforo/image.png. My other values are No-repeat and Top.

    To receive the effect where the background image remains fixed when you scroll enter the following in the Miscellaneous box: background-attachment: fixed;
  10. Ampd

    Ampd Member

    I went to do the HTML tab and did that, but the image only displays in the footer.
  11. Lykke

    Lykke Well-Known Member

    Hey :) Great looking skin ^^
    Would you share with me how you rounded the corners in the sidebar? I have been trying this in so many different css files now with this:

    border-radius: 2px 2px 5px rgba(0, 0, 0, 0.3);

    but I cant get it to work like the primaryContent already .. dunno why?

    You can see the forum we're working on here: www.entropiaplanets.com/xf

    Thanks :)
  12. Brogan

    Brogan XenForo Moderator Staff Member

    Just add a border radius to the .section class, e.g.
    .section {
    border-radius: 2px 2px 5px;

    It doesn't support the rgba attribute though.
  13. Lykke

    Lykke Well-Known Member

    cool - thanks :) it works
  14. Ryan Kent

    Ryan Kent Well-Known Member

    I looked at your site. If you add the following to EXTRA.css it should work
    #content {opacity 0%; }
    That is not the standard way to do it, but it works. To help further I would need to look at your setup closer. I sent you a forum PM

Share This Page