Wallpaper size

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
 

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
 

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?
 

Jake Bunce

XenForo moderator
Staff member
Now for the hard part, is there a way to do this with like 5 wallpapers and rotate them out automatically?
Edit this template:

Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

Add the colored code near the top:

Rich (BB 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).
 

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.
 

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.
 

madmartigan

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

View attachment 20496

Do the same for this property:

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

View attachment 20497

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:

View attachment 20500
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?

 

jackrouse

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.

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
 

Jake Bunce

XenForo moderator
Staff 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?
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.
 

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?
 

kankan

Well-known 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
 

Jake Bunce

XenForo moderator
Staff 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
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.
 

kankan

Well-known 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
 
Top