Hey all,

I'll try to explain this as simply as possible. LOL I'm definitely a newbie when it comes to CSS.

Here's my problem. I have a full length, non-repeating background image I'm using on my website. It contains a white swoosh at the top. Part of this white swoosh is in the content area. What happens is, when you pull in the browser window, at a certain point you will begin to notice the white swoosh breaking up in the upper left corner. You can view this at: broken swoosh - Scotia Village

The main code I'm using for the style sheet, background wise is:

Code:
body {
    height:100%;/* needed to base 100% height on something known*/
	        background-color: #e9e3bf; 
			background-image: url(images/bkg_scotia.jpg); 
	        background-repeat: no-repeat;
	        background-position: top;
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
}

#outer {
    width:999px;
	margin:auto; 
	padding-left: 0px;
	padding-right: 0px;
    min-height:100%;
    margin-top:-190px;/*footer height - this drags the outer 40px up through the top of the monitor */
}
/* #inner protects any floats in the content from clearing the :before float */

#inner {
	width: 999px;
	height: 100%;
	overflow:hidden;
    /* you could use float:left instead of overflow:hidden if you wanted content to overflow*/
    /* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */
}

Now, if you go to this link: correct swoosh - Scotia Village you'll see the swoosh stays in place perfectly. I've added background-attachment: fixed; to the body style, and that is what fixes this problem. BUT then the background won't scroll vertically, which I need; because otherwise as you scroll the background still shows.

Is there a way to put make a background image fixed horizontally; but still scroll vertically? Or am I missing something in the code I'm using? I have been trying to find a solution to this forEVER; so any help would be SO appreciated you have no idea! Thanks!