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:
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!