Brian Funk wrote:

>>*The purple bricks do not line up with the blue bricks in IE and they 
>>scroll... If it can be fixed, let me know and I'll fix it.
>>    
>>
>IE doesn't support fixed positioning. You can find a ready to use javascript
>fix at http://www.doxdesk.com/software/js/fixed.html
>  
>
Hi Gretchen & Brian,
Without javascript it can be done too, in this case, in an easy css-way:

- Make a background-image just over the whole width of the screen, 
including the blue and the purple bricks.
- This one 
<http://home.tiscali.nl/developerscorner/css-discuss/images/bricks-bg-new.jpg> 
for example (it is 1280px width for 1280x1024 screens - can be made 
bigger for bigger screens; paste left and right some more).
- It is not needed to make this image as high as the screen: it can be 
repeated vertically.
- Place the image as background-image in the body, with 
background-position: 50% 0. Now it is always centered (if wide screen 
then the left & right parts will not be visible (out of the viewport; no 
scrollbar!).
- Give her/him no background-repeat, then she/he will repeat by default: 
automatically vertical (and also horizontal, but that's out of screen).
- Now the bricks are filling the whole screen, and can get the fixed 
property (in the background IE does support this, not elsewhere).
- The header-img can now be pasted in a layer above the background: in a 
normal html-div.
- You can use a separate <div id="header"></div>, then followed by the 
contentwrapper with all the rest.
- I made a slightly wider header, to fit better without small 
borderlines left or right: this one 
<http://home.tiscali.nl/developerscorner/css-discuss/images/logomast2.jpg>.
- And all the background-images (and good positioning with respect to 
the other background...) in the rest of the boxes is not needed anymore!

Result is this testpage 
<http://home.tiscali.nl/developerscorner/css-discuss/test-gcw.htm> (I 
omitted the nav-menu for simplicity), with same effect in IE as in FF 
and others.
See source code for details (css is included).

Extra advantage:
- The amount and volume of the images is drastically smaller.
- The backwall5.jpg (169 kB!) and brick1.jpg (24 kB) can be missed; the 
logomast.jpg (22 kB) can be a bit reduced.
- For background and header rest only the bricks-bg-new.jpg (34 kB) and 
the logomast2.jpg (19 kB).
- In total the original page had 264.930 kB (!) to download, that is 
around 53 sec. on a 56K modem before everything is on screen.
- In my page (without the menu, but with all images) it's speeded up to 
20 sec. or less.
- Used: http://www.websiteoptimization.com/services/analyze/. 
<http://www.websiteoptimization.com/services/analyze/>
- (Is included in Chris Pederick's WebDeveloper Extension for Firefox)

Wish you good work/luck!
francky

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to