Wallpaper size

[Rho Delta]

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]

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:



Do the same for this property:

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



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:

 

[Rho Delta]

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

 

[Jake Bunce]

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:

	<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]

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.

 

[Jake Bunce]

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.

Yeah I need to post them as resources. I will do that.

 

[Digital Doctor]

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]

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]

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]

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:

background-size: contain;

That will scale the image to fit, rather than trying to precisely fit the dimensions.

 

[madmartigan]

Actually, add this to the Body property:

background-size: contain;

That will scale the image to fit, rather than trying to precisely fit the dimensions.

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

 

[Jake Bunce]

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

 

[madmartigan]

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

I did wrong its fixed thank you

 

[Albert]

I try using

background-size: contain;
-moz-background-size: contain;
background-attachment: fixed;

the image is not contain anymore
how can I use contain and fixed together?

 

[Jake Bunce]

I try using

background-size: contain;
-moz-background-size: contain;
background-attachment: fixed;

the image is not contain anymore
how can I use contain and fixed together?

I don't have problems in my testing.

You can also try "cover":

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

 

[Albert]

Wow Thank you Jake, it works now with "cover"

 

[Forsaken]

You can also use this jQuery plugin: http://codevisually.com/backstretch-add-a-dynamically-resized-background-image-to-any-page/

 

[kankan]

Hi Jake,

I have change my code to page_template to :

<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]

Hi Jake,

I have change my code to page_template to :

<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]

Hi Jake,

Thank you

I have this in the source 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