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

Wallpaper size

Discussion in 'Styling and Customization Questions' started by Rho Delta, Oct 24, 2011.

  1. Rho Delta

    Rho Delta Well-Known Member

    What is the optimal wallpaper size/resolution for a full wallpaper that would fit my new site? I do not want a header bar at the top, I want the wallpaper to fill the whole thing with my logo over it. This would be for a logo that is not repeating, I currently use a repeating pattern. Thanks.

    http://206.214.211.214/~mike/index.php
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I think you want this:

    http://xenforo.com/community/threads/problems-with-styling.21415/#post-270982

    As for the size of the background image... I recommend a fixed width for your forum so you can define the size:

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

    Add a width and margin like so:

    Screen shot 2011-10-24 at 1.39.18 PM.png

    Do the same for this property:

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

    Screen shot 2011-10-24 at 1.40.20 PM.png

    Notice that the Body has a slightly larger width than the Page Width Controller. That way the content area fits nicely inside of the fixed-width background image.

    You will probably also want to set a background color for that outermost area (outside of the fixed layout). That is controller by this property:

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

    After doing all of this (including the above link) the result is a fixed-width forum layout with a background image:

    Screen shot 2011-10-24 at 1.47.31 PM.png
     
    The Pet Board likes this.
  3. Rho Delta

    Rho Delta Well-Known Member

    Now for the hard part, is there a way to do this with like 5 wallpapers and rotate them out automatically?
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Edit this template:

    Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

    Add the colored code near the top:

    Code:
    	<link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}" href="{xen:link forums/-/index.rss}" />
    	<xen:if is="{$pageDescription.content} AND !{$pageDescription.skipmeta} AND !{$head.description}"><meta name="description" content="{xen:string wordTrim, {xen:helper stripHtml, {xen:raw $pageDescription.content}}, 200}" /></xen:if>
    	<xen:if is="{$head}"><xen:foreach loop="$head" value="$headElement">{xen:raw $headElement}</xen:foreach></xen:if>
    </xen:hook>
    </head>
    
    <xen:set var="$background.1">path/to/background1.gif</xen:set>
    <xen:set var="$background.2">path/to/background2.gif</xen:set>
    <xen:set var="$background.3">path/to/background3.gif</xen:set>
    
    <body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'} style="background-image: url('{xen:raw '$background.{xen:calc '({$serverTime} % 3) + 1'}'}');">
    <xen:hook name="body">
    
    It's similar to this:

    http://xenforo.com/community/threads/display-a-random-banner.19563/

    Be sure to manage your background numbers correctly, as well as specify the total number of backgrounds in the rand calculation (3 in the example).
     
  5. Digital Doctor

    Digital Doctor Well-Known Member

    These great posts are not findable when users want them.
    I wonder if there is a way to make this type of information findable for future information seekers.
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Yeah I need to post them as resources. I will do that.
     
    Shelley likes this.
  7. Digital Doctor

    Digital Doctor Well-Known Member

    hmmm.
    Not sure about the Resource Manager is the spot for hosting collections of small code changes.
    It's certainly better than the current location.
     
  8. madmartigan

    madmartigan Active Member

    How do you mean with this part? "I recommend a fixed width for your forum so you can define the size"
    lets say i have a background 2560 x 1600 how can i make it fit? I have been stucked with this all night nothing works for me. I made this picture to 800x500 http://www.northland-gaming.com/upload/upload/tedt.gif didnt work eather.

    I want my forum in the middle of this background i want it to look something like this is it possible?

    [​IMG]
     
  9. jackrouse

    jackrouse Member


    Tips and tricks would be a good place, or even a new forum for snippets, because this is what it is really, also be good to have an index as a sticky to make things easier to find
     
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Actually, add this to the Body property:

    Code:
    background-size: contain;
    
    That will scale the image to fit, rather than trying to precisely fit the dimensions.
     
  11. madmartigan

    madmartigan Active Member

    It fits halv the forum the pic was 2560 x1600 how can i set the whole forum full screen view
     
  12. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I don't understand. Can you post a URL showing the problem?
     
  13. madmartigan

    madmartigan Active Member

    I did wrong its fixed thank you
     
  14. Albert

    Albert Member

    I try using

    Code:
    background-size: contain;
    -moz-background-size: contain;
    background-attachment: fixed;
    the image is not contain anymore
    how can I use contain and fixed together?
     
  15. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I don't have problems in my testing.

    You can also try "cover":

    http://www.w3schools.com/cssref/css3_pr_background-size.asp
     
  16. Albert

    Albert Member

    Wow Thank you Jake, it works now with "cover" :D
     
  17. Forsaken

    Forsaken Well-Known Member

  18. kankan

    kankan Active Member

    Hi Jake,

    I have change my code to page_template to :

    Code:
    <xen:set var="$background.1">http://www.forum-des-portables-asus.fr/www/background1.png</xen:set>
    <xen:set var="$background.2">http://www.forum-des-portables-asus.fr/www/background2.png</xen:set>
    <xen:set var="$background.3">http://www.forum-des-portables-asus.fr/www/background3.png</xen:set>
    <xen:set var="$background.4">http://www.forum-des-portables-asus.fr/www/background4.png</xen:set>
     
    <body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'} style="background-image: url('{xen:raw '$background.{xen:calc '({$serverTime} % 4) + 1'}'}');">
    <xen:hook name="body">
    But background does not change on page reloading.

    Did i do something wrong?

    Thank you
     
  19. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Looks fine. Make sure you are viewing the right style. And check the source code of the page to make sure your inline background-image is showing in the body tag.
     
  20. kankan

    kankan Active Member

    Hi Jake,

    Thank you

    I have this in the source code :
    Code:
    <body style="background-image: url('http://www.forum-des-portables-asus.fr/www/background1.png');" data-twttr-rendered="true">
    So it reads the code, but on page reloading, does not change the background.

    Regards
     

Share This Page