• Locked
2 replies [Last post]
Thu, 2009-12-31 11:11
blackhatz83
Offline
newbie
Last seen: 12 years 26 weeks ago
Timezone: GMT-5
Joined: 2009-12-31
Posts: 1
Points: 2

I'm no expert, so please bear that in mind when offering any assistance and your assistance given is appreciated!

Onto my question..

How do sites like this:
http://www.gamereplays.org and http://www.vbulletin.org setup their backgrounds so that they enclose the middle content area?

For an example, right click the background and view it. It has a left side and a right side.

I am wanting to do something similar to my vbulletin site located at http://www.cowboys-forum.com

But with the present themeing I don't know what I'd need to do to accomplish that.

Thank you for your help.

Top
Tags:
Thu, 2009-12-31 15:46
#1
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 50 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Can't get gamereplays.org to

Can't get gamereplays.org to load, but this is the background for vbulletin.
http://www.vbulletin.org/forum/images/cstyle/blue/bodybkgd950px.jpg

Set it as the body background and repeat-y

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
Fri, 2010-01-01 19:06
#2
Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 28 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Hello blackhatz83

At gamerplays.org the background is positioned top center so, when the 980px wide site is centered, it all fits together. They do it with this line -
 background:#000 url(/community/gr_common/images/pagebg.jpg) repeat-y top center;

Same thing at vbulletin.org, when the background and main container are both centered, they can work together like this. Here is the line that load vbulletin's background - 

html {
background: url(../images/cstyle/blue/bodybkgd950px.jpg) center repeat-y
}

Your background is fixed in position which is what lets your site scroll without the background moving. Within the head of your document you can find the embedded CSS that does it: 

body
{
	color: #000000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	background-image: url(../images/misc/forumbackground.jpg);
	background-attachment: fixed;
	margin: 5px 10px 10px 10px;
	padding: 0px;
 
 
}

Top
  • Locked