Hi everyone

Just curious to know if anyone has a technique to accomplish this. I've tried having one image as the background on the html tag and one on the body tag. Problem is that I'd like to have them static and the minute I do that the html tag's bg colour cuts the body tag's bg image out at the bottom after scrolling below the initial view of the page.

body {
	margin-top:0px;
	height:100%;
	background:url(../images/bg_center.gif);
	background-repeat:no-repeat;
	background-position:left bottom;
	background-attachment:fixed;
}
html {
	margin-top:0px;
	height:100%;
	background:url(../images/bg_right_rome.jpg);
	background-repeat:no-repeat;
	background-position:right top;
	background-attachment:fixed;
	background-color:#E5D2A6;
}

I'm trying to get an image on either side of the table. I know I could have accomplished this simply by having a 3 column table but I've designed the site so that the full 774 pixel area is used for content and I'd like to allow users with 800x600 resolution to view the site without having a sidewards scroll bar at the bottom of their page. Simply put, if they are running 800x600 they wont see the side bg images. If they're running a higher resolution then they will.

Recommended Answers

All 3 Replies

Hi,

I'm not sure if I understood you correctly, but have you tried playing with z-index?

I've ended up using a div on either side of the content table with background images inside them.

for background-color: (color); make it background-color: transparent; that should work. If not send us ur whole code to help

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.