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:
height:100%;/* needed to base 100% height on something known*/
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 */
/* 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!