ansaurus

Question

Background image fixed with vertical scroll bar in IE, broken by Tapestry5 components/css

Answer 1

A:

By doing the following,

body
{
    background: url( yourBG ) repeat-x;
}

you should not have any problem... Your background will scroll as intended.

If this wasn't helpful, try updating your question by adding some more code example of what you're doing.

ADDED AFTER POSTING COMMENTS :
HTML :

<body>
    <div id="background"></div>

    <div id="yourContent">
    ...
    </div>
</body>

CSS :

#background
{
 position: relative;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 background: url(images/bg_slice.png) repeat;
 z-index: 1;
}
...

I've used that approach more than once, so I am positive it SHOULD work.

Zwik 2010-05-26 15:42:17

no go, thats what i started off with and it wasnt working.

Rich 2010-05-26 16:13:38

OK. I've looked at the code you posted, and here's a possible solution I've used once : Create a div child of body, that has no children. Make it 100% of your body size and use it for you background. I'll post the code example in my answer

Zwik 2010-05-26 17:08:03

I added the <div id="bground></div> and the related CSS you posted, but now it doesn't even display a background image in Firefox or IE. body { margin: 0; padding: 0; font: 15px Arial, Helvetica, sans-serif; text-align: justify;}#bground { background: url( images/myimg.jpg ) repeat-x; width: 100%; height: 100%; }

Rich 2010-05-26 18:03:48

I found the exact code I was talking about, I'll update my answer to reflect the little difference. The major difference is the "position: relative". This code is compatible with IE8, but no guaranty on IE7.

Zwik 2010-05-26 19:43:35

Hmm, this still doesn't work for me. I take your word for it that it should work, I'm starting to see a pattern in the issue I'm seeing. My webapp is built in Tapestry, and it seems any page that has some tapestry components on it displays this scrolling issue. However, pages with pure html tags do not exhibit this behavior. So this seems to be a Tapestry problem, and may be rooted in the Tapestry default CSS. I'm going to update this with the tapestry css included in my post, as the problem has somewhat shifted.

Rich 2010-05-26 20:25:46

Answer 2

+2 A:

This is an old query and you probably have an answer by now but I had this problem whenever some js was included in a page (even unintentionally), blackbird.js was being included (the client-side debug div provided by Tap) - it has some IE specific code that stops the bg image being fixed - I had to use my own local patched version of blackbird.js to get around the issue. Comment Line 117 blackbird.js:

bodyTag.style.backgroundAttachment = 'fixed';

Jim 2010-07-16 19:56:20

Wow thanks, that is exactly the problem. Now I don't feel like some crazy CSS inept anymore. Now to figure out how to actually handle this gracefully without managing my own version of the tapestry-core jar...

Rich 2010-07-20 16:27:12

Thank you for such a good description. We were having this exact problem.

American Yak 2010-09-29 14:29:10

ansaurus

tags:

views:

answers:

Background image fixed with vertical scroll bar in IE, broken by Tapestry5 components/css

related questions