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

Problems with styling

Discussion in 'XenForo Questions and Support' started by Garamond, Oct 13, 2011.

  1. Garamond

    Garamond Well-Known Member

    I want to have one huge background picture from the top, filling at least half the screen downwards and fading into the background. How can this be accomplished? I have spent two hours adjusting the @html and @header to correspond, but it refuses to play with me. They just doesn't want to match up. Any help would be appreciated.
     
    Strong likes this.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Specify a background image for this style property:

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

    In the same area, you may wish to set a position for the image so it starts below the header background, like this:

    Screen shot 2011-10-12 at 7.00.33 PM.png

    Or you can remove the header background by editing this style property and setting a transparent background:

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

    Screen shot 2011-10-12 at 7.02.39 PM.png

    This is the result:

    Screen shot 2011-10-12 at 7.03.05 PM.png
     
    leftie, Strong and Rho Delta like this.
  3. Garamond

    Garamond Well-Known Member

    That's excellent! Just what I wanted :) thanks, Jake
     
  4. fredrikse

    fredrikse Active Member

    One additional question. What size should the background be in to fit different resolutions?
     
    erich37 likes this.
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    erich37 likes this.
  6. erich37

    erich37 Well-Known Member

    do you have a suggestion of how big the size of the background-image should be?
    I have seen some pages with bg-image, and then when looking at the image itself, the browser is showing a "+" and "-" (minus sign) to zoom the image in and out.
    Not sure how this is accomplished.

    Could you please give a suggestion of how many Pixel the image should be in size? So that it fits to different screen-size resolutions, but still loading fast....

    Many thanks?
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You are optimizing for the screen sizes of your users. For computer monitors 1024x768 is a good minimum size to shoot for.
     
    erich37 likes this.
  8. fredrikse

    fredrikse Active Member

    I want to accomplish what I have sketched down in the picture below. What elements are involved in getting this done the right way? Do I for instance need to split the graphics in different files?

    background_concept.jpg
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  10. fredrikse

    fredrikse Active Member

  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Nope. I recommend making the fade part of the image.
     
  12. fredrikse

    fredrikse Active Member

    OK. What I would like to achieve is to have a top part image including the face into for example the blue color at the bottom, which is a solid color set in Xenforo. Do I put the faded picture in the header with a height that I like?
     
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Based on your picture, I think you want to put the faded image into the Body as shown in my post.
     
  14. fredrikse

    fredrikse Active Member

    Alright. I think I have managed to come up with something that works pretty good (with a few minor issues to sort out). I have put the image as a background in the body. The settings used are as follows:

    body-settings.jpg

    Now to my issues. When the page is long enough, the background is stretched out normally as in the picture below:

    indexpage.jpg

    But when I for instance go to the help page, the page is to short and something happens to the background. It does not stretch out as good as before in the dark blue color which I use for the background:

    helppage.jpg

    How can I solve this?
     
  15. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Try putting the background in HTML instead of Body, and give Body a transparent background. That should make it fill the height of the window regardless of the content.
     
    fredrikse likes this.
  16. fredrikse

    fredrikse Active Member

    Thanks for the advice! I'll try it!
     
  17. fredrikse

    fredrikse Active Member

    Awsome! It worked like a charm (y)
     
  18. fredrikse

    fredrikse Active Member

    It's all starting to come together now. One thing I wonder now is if it's possible to extend the blue line (below the light blue part in the top forum section) to the left and right and to make it follow the bottom of the white header part?

    bottomofheader.jpg
     
  19. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  20. fredrikse

    fredrikse Active Member

Share This Page