background image

CSS Resizable "Background" Image Technique

Resize this window. The background will remain the same width as the window. The technique uses an actual image tag and it's own fixed position div wrapper to pull off the effect. This will probably make semantic-web nazis' heads explode, but at least it doesn't use tables.

The image will remain at the top of the page however, so having the image end in a single color, matched by a similar color for the body background would probably finish this off quite nicely. If you need the image to center, use the tables technique linked above.

Bonus: To make this work in a certain browser-that-needs-to-die, I also include my technique for faking fixed positioning in IE6.

Photo ©2004-2007 M. Rohde.

Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Integer id tellus et justo sagittis fermentum. Suspendisse condimentum nulla sit amet arcu suscipit luctus. Maecenas dictum, tortor sed tincidunt tempus, dolor eros convallis lacus, fermentum vestibulum massa erat eu neque. Nunc id nisi ac quam gravida varius. Aliquam tempor varius elit vel bibendum. Pellentesque felis lacus, pretium ut sagittis nec, molestie eget metus. Phasellus eget diam id diam tincidunt mollis non quis odio. Nam luctus cursus sagittis. Integer hendrerit tellus quis nulla gravida sit amet bibendum dolor molestie. Nulla facilisi.

Donec mauris lectus, pharetra quis sollicitudin sit amet, consequat vitae nibh. Maecenas luctus, tellus ut aliquam accumsan, lorem metus varius ipsum, ac lacinia augue arcu id urna. Quisque tempus lacinia urna et laoreet. Maecenas placerat lobortis ultrices. Cras eu ullamcorper dui. Ut dui nunc, porta eu auctor ac, consequat eu sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras tempus aliquet augue eu commodo. Nunc commodo, urna et luctus posuere, odio augue tristique massa, a placerat dolor diam at felis. Proin malesuada sagittis adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tristique diam non eros ultrices congue.

Aenean vel enim in arcu volutpat scelerisque vitae vitae justo. Vestibulum id sollicitudin diam. Aliquam vel est leo, sed sagittis dui. Sed nec sagittis elit. Mauris orci metus, suscipit et laoreet eget, posuere a dui. Quisque ac porttitor nulla. Phasellus dapibus iaculis porta. Proin lacus augue, aliquam quis condimentum eget, aliquam eget risus. Curabitur sit amet libero quis velit viverra gravida. Morbi eu dolor odio. Fusce suscipit viverra ultrices. Mauris vulputate pulvinar suscipit. Ut vel orci eu augue tristique ullamcorper vel ac dolor.

Praesent orci tellus, mollis at hendrerit quis, volutpat quis nibh. Phasellus justo eros, scelerisque ullamcorper aliquam sit amet, porttitor at lectus. Praesent dapibus viverra porttitor. Nunc nulla mauris, interdum non accumsan in, imperdiet id urna. Curabitur bibendum tristique lorem non cursus. Etiam nec neque ac purus eleifend placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In tristique, orci id luctus molestie, sapien augue pellentesque quam, at tincidunt ipsum nibh sit amet turpis. Vestibulum sodales, sapien quis condimentum accumsan, erat tellus feugiat diam, sed laoreet lectus eros non quam. Cras pretium nisi id mauris imperdiet aliquet. Fusce ornare cursus ipsum, sit amet lacinia dui rutrum sit amet. Aliquam erat volutpat. Etiam sed nibh id lectus pretium fermentum et at risus. Ut at blandit metus.

Integer id mauris orci, et rutrum felis. Quisque auctor risus justo, sit amet tincidunt diam. Sed sit amet ultrices lorem. Sed placerat, risus eu cursus tincidunt, tellus sem imperdiet velit, sit amet mattis lacus erat at velit. Sed tempus accumsan mi ut fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis fermentum, quam sit amet fringilla blandit, nisl tortor ultrices orci, sit amet consectetur elit ante vitae arcu. Aenean sit amet libero nunc. Integer magna felis, mollis a pulvinar vel, congue eu nisl. Suspendisse cursus dui sed justo porta venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus posuere dictum sagittis. Donec auctor nisi ullamcorper orci tempus condimentum. Morbi gravida nisi sit amet lacus sollicitudin ut vulputate metus mattis. Sed vel tortor ut libero porttitor vestibulum. Ut venenatis tincidunt lacus, nec pharetra mi commodo sit amet. Duis venenatis ipsum vitae lorem faucibus molestie. Aliquam velit ante, interdum a varius vitae, rutrum vel metus.

Aenean a fringilla ante. Suspendisse felis quam, tincidunt eget sagittis id, eleifend et libero. Vivamus a purus vitae purus tincidunt fermentum. Donec id ultrices purus. Vestibulum dapibus dapibus nulla, non gravida nunc varius vel. Donec elementum erat sit amet dui iaculis nec convallis augue venenatis. Nulla porta auctor elit eu cursus. Sed a elit ut augue posuere ultrices nec eget velit. Maecenas dui leo, scelerisque eu suscipit vel, auctor a mauris. Duis at vehicula neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean mattis sodales dolor vitae posuere. Morbi placerat ultricies quam sit amet lacinia. Sed mauris velit, pulvinar vel elementum sed, molestie eu nisi. Aliquam tincidunt condimentum felis ac vulputate. Pellentesque ultrices erat non arcu luctus a iaculis quam consequat. Etiam sapien felis, faucibus eget laoreet nec, consequat eu turpis.

Suspendisse mauris mauris, faucibus sit amet porttitor a, cursus in sapien. Sed eget nunc non dolor lobortis varius. Quisque id nulla nec elit sagittis tempus. Nam dignissim est sed tortor facilisis rhoncus. Curabitur porttitor malesuada facilisis. Vivamus vel dui at sapien pellentesque consectetur. Aenean nec pharetra justo. Aliquam pulvinar cursus tincidunt. Aliquam erat volutpat. Vivamus non nisl id mi porttitor fringilla vel semper ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut dignissim tortor. Suspendisse eleifend, augue ac consectetur consectetur, erat mi vehicula lectus, sit amet ultrices erat augue eu leo. Curabitur iaculis mattis mauris ac fringilla. Suspendisse ac vestibulum sapien. Aliquam eros dui, semper lobortis laoreet et, scelerisque et nunc. Phasellus vitae tortor vitae neque cursus dignissim. Aliquam in dolor et felis pharetra gravida.