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

Wallpaper size

Rho Delta

Well-known member
#1
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
#2
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
 

Jake Bunce

XenForo moderator
Staff member
#4
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:

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
#5
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
#7
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
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?

 
#9
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
#10
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.
 
#14
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

Active member
#18
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
#19
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

Active member
#20
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