Side images that bow out of the browser

Joe Kawano

New Member
Hi! I'm interested in creating a website where graphics on the side of the main-content area disappear when the viewport of the browser is shrunk down. Here are a couple examples:
http://www.freehostia.com
and
http://www.newgrounds.com/

Notice how these are not static backgrounds, but the imagery to the right and left of the central text/content area are "attached" to the main area, so no matter how BIG the area gets, these side images stay with the central area. (Again, if the viewport is sized down, the LEFTMOST side-image will disappear graciously off the left-side, but the main/center content does not.)

Looking at the source code has yielded little fruit: I know CSS but I am still baffled by this trick and wnat to know how to do it. Also, I would have researched this more extensively on Google or Dogpile or another search engine, but I am not even sure what I'd search for!

Thanks for all your help! :eek:
 

horrorshow75

New Member
Just create an image that looks the one below

here is the css: http://css.ngfiles.com/ng_publish.css?1229024146 You can dig through the code to get what you need.
Code:
#main {
	background: url(http://img.ngfiles.com/headerbg.jpg) top center no-repeat;
	padding-right: 1px; /*	Added 10/14/8: Fixes jiggle in FF3 */
	*padding-left: 1px; /*	Added 5/9/7: Fixes "jiggle" when resizing windo pixel by pixel 	*/
	}

Now this will obviously vary slightly based on your site layout.
 

Attachments

  • headerbg.jpg
    headerbg.jpg
    94.4 KB · Views: 15
Top