6 replies to this topic

[qwerty]

I'm taking a site out of iframes, and trying to keep the same look. The iframes had a fixed background image and overflow set to auto, so I'm attempting to do the same thing with the <div> I'm replacing it with. However, the image (which is the same size as the div) doesn't seem to want to position itself properly. In fact, its position seems to be partly dependent on the size of the browser window -- that is, whether the full page requires a vertical scrollbar.

And then there's the fact that, while it's not working properly in standards-compliant browsers, it's wrong in a different way in IE (of course).

Here's the code I'm using for the div:

CODE

#content {
  text-align:left;
  width:650px;
  height:500px;
  overflow:auto;
    background-color:#000;
    background-image: url(/slices/T3BG.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
  background-position:center;
    margin:0;
    padding:0;
  }

If you want to look (and I apologize in advance for the music) a page I've updated is here and one that still uses the iframe is here.

[Dimmerswitch]

Background images which are using position:fixed are positioned relative to the viewport (browser window), not the containing element.

http://meyerweb.com/...piral/demo.html is a classic example of using fixed positioning for background images.

I should be able to take a look tonight and give you better help, but that's hopefully a pointer in the right direction to get you started.

[maleman]

I did this and it fixed it in FireFox

#content {
text-align:left;
width:650px;
height:500px;
overflow:auto;
/*background-color:#000;*/

background-image: url(T3BG.jpg);
/*background-attachment: fixed;*/
background-repeat: no-repeat;
background-position:center;
margin:0;
padding:0;
}

IE's a whole nother cn of worms

[qwerty]

Background images which are using position:fixed are positioned relative to the viewport (browser window), not the containing element.

http://meyerweb.com/...piral/demo.html is a classic example of using fixed positioning for background images.

I should be able to take a look tonight and give you better help, but that's hopefully a pointer in the right direction to get you started.

So that means I should give it a position at the top left corner of the div relative to the page itself?

[Dimmerswitch]

So that means I should give it a position at the top left corner of the div relative to the page itself?

That'd be one option - position the background-image 205px from the top, and centered horizontally.

But since IE has poor support for position fixed anyways, that wouldn't buy us a lot (unless the target demographic for Twist 25 is unusually savvy about great alternative browsers).

Turns out the fix is totally easy though:

http://thrumdesign.c...ox/twist25.html

The CSS is embedded for ease of troubleshooting, but the changes are

1) Add an id to the 'parent' of your content div

CODE

<div id="contentwrapper" class="cen">
<div id="content">

2) Move the styles pertaining to the background-image to the contentwrapper div
3) Don't use position: fixed

CODE

  #contentwrapper {
       background-color:#000;
       background-image: url(http://twist25.com/slices/T3BG.jpg);
       background-repeat: no-repeat;
       background-position:top left;
  }
  
  #content {
       text-align:left;
       width:650px;
       height:500px;
       overflow:auto;
       margin:0;
       padding:0;
    }

[maleman]

Try this Qwerty, it'll get you through FF and IE7

Put a div behind #Content (#contBack). #Content goes inside $contBack

#contBack {
text-align:left;
width:650px;
height:500px;
background-image: url(/slices/T3BG.jpg);
background-repeat: no-repeat;
background-position:top;
margin:0;
padding:0;
z-index: 7;
}
#content {
text-align:left;
width:650px;
height:500px;
overflow:auto;
margin:0;
padding:0;
z-index: 8;
}

[qwerty]

Many thanks, folks