Div issue with background

**twirp** · September 22nd, 2006, 4:00 PM

I'm trying to make a layout (that's fluid I think...?)
But whenever it starts to scroll, the background doesn't match the image.
Click & See
The css is:

Code:

body{
	background: #2B452C url(http://tyl.cc/images/random_bg_l.jpg) repeat-y left;
	overflow: hidden;
}

#container{
	background: url(http://tyl.cc/images/random_bg_r.jpg) repeat-y right;
	overflow: auto;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}

#topbar{
	background: url(http://tyl.cc/images/random_02.jpg) repeat-x;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 500px;
}

#topleft{
	left: 0px;
	top: 0px;
	background: url(http://tyl.cc/images/random_01.jpg) repeat-x;
	width: 401px;
	height: 500px;
	position: absolute;
}

#topright{
	right: 0px;
	top: 0px;
	background: url(http://tyl.cc/images/random_03.jpg) repeat-x;
	width: 345px;
	height: 500px;
	position: absolute;
}

#menu{
	position: absolute;
	top: 279px;
	right: 20px;
	width: 180px;
}

and inside the body:

Code:

<div id="container">
<div id="topbar"></div>
<div id="topleft"></div><div id="topright"></div>

<div id="menu">
<!-- Menu -->
Menuness
<!-- Menu -->
</div>

</div>

Thanks for any help. (and I hope this belongs here)

H · September 22nd, 2006, 4:13 PM

You're not very clear on what exactly isn't matching up... Is it when the window is narrow, the anime-ish figure begins to get cut-off?

**twirp** · September 23rd, 2006, 3:54 PM

Quote:

Originally Posted by Haugland

You're not very clear on what exactly isn't matching up... Is it when the window is narrow, the anime-ish figure begins to get cut-off?

I guess it's not working only in firefox.
In firefox, the right navigation background doesn't match up with the image.

LastRebirth · November 22nd, 2006, 1:08 AM

Code:

body{
	background: #2B452C url(http://tyl.cc/images/random_bg_l.jpg) repeat-y left;
	overflow: hidden;
}

You should have

Code:

body {
background: #2B452C;
background-image: url(http://tyl.cc/images/random_bg_l.jpg);
background-repeat: repeat-y;
background-position: left;
overflow: hidden;
}

If that doesn't work then I dunno xD

November 22nd, 2006, 1:08 AM	#4 (permalink)
LastRebirth Registered User Fresh Surpasser Joined in Nov 2005 Lives in Florence 18 posts Gave thanks: 0 Thanked 0 times	Code: body{ background: #2B452C url(http://tyl.cc/images/random_bg_l.jpg) repeat-y left; overflow: hidden; } You should have Code: body { background: #2B452C; background-image: url(http://tyl.cc/images/random_bg_l.jpg); background-repeat: repeat-y; background-position: left; overflow: hidden; } If that doesn't work then I dunno xD __________________ Last Rebirth Aidenn RPG (IRC)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

September 22nd, 2006, 4:13 PM	#2 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,092 posts Gave thanks: 48 Thanked 131 times	You're not very clear on what exactly isn't matching up... Is it when the window is narrow, the anime-ish figure begins to get cut-off?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)