Side images that bow out of the browser

Joe Kawano · 01-25-2009, 03:47 PM

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!

horrorshow75 · 01-25-2009, 08:57 PM

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.

01-25-2009, 03:47 PM	#1
Joe Kawano New Member Join Date: Jan 2009 Posts: 1	Side images that bow out of the browser 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!

01-25-2009, 08:57 PM	#2
horrorshow75 Silver Member Join Date: Dec 2008 Location: HBG, PA Posts: 160	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. Attached Images __________________ <!-- Tables are for data, not layout! -->

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode