Forums/Bugs & Fixes

Problems with background images when logged in

Michael Slater
posted this on November 3, 2010, 11:39

When you are viewing a site while logged in, the Webvanta toolbar sits on top of the site and pushes the site content down to make room.

Making this work reliably across all browsers and all possible site designs has proven to be a challenge. With the current implementation, we are seeing background image alignment issues with sites that have a background image on the body element, but not on the html element. The background image gets shifted down twice as far as it should when you are logged in, messing up the alignment.

Generally, you can resolve this by duplicating the background image CSS rule that is on the body element, and also applying it to the html element. This has no effect on the normal appearance of the site, but it does keep the double top spacing from being applied when you are logged in.

For example, suppose your body element is styled like this:

body{
    margin:0;
    color:#4c4c4c;
    font:13px Arial, Helvetica, sans-serif;
    background:#fff url(/images/bg-body.gif) repeat-x;
}

You would add to (or create) a style for the html element, including the last line of the body style:

html {  
   background
:#fff url(/images/bg-body.gif) repeat-x;
}

There is a separate issue with IE7, with which the page content is not shifted down enough. We don't have an immediate work-around for this one.

Please let us know if you are seeing other issues. Later this year, we'll be reworking the code for the toolbar and would like to have as many troublesome test cases as possible to verify against.