PDA

View Full Version : Image clipping from the left using CSS Layout



narf_bro
Jan 27th, 2009, 02:57 AM
Hi,

I have been working on the following website: www.tacticstudios.com and am trying to get the image on the left to always appear left: -400px relative to the table which is centered by html.

You can see all the source/css through that website (css is at tactic.css in root dir).

Example of what I want to achieve, look at http://www.worldofwarcraft.com/index.xml. See the big guy with the sword in the top left? When I shrink the width of my browser, the image gets clipped from the *left* and the main content remains centered. That's exactly what I want.

I've been messing around with div's and relative positioning but even though I can seem to relative position the image off to the left with -400px;, the center stuff always appears below. using float:left doesn't get the look I want, because then they're side by side rather than centered and the image does not clip from the left.

Any help would be appreciated, seems like a simple thing to do.

Jesse

redspyder
Jan 27th, 2009, 04:07 AM
hi Jesse,

WoW are using a couple of large background images, the big guy is part of an image that's 980px wide.

The effect is being achieved in the stylesheet with the following:


body {background: #000 url(../images/big_guy_on_left.jpg) no-repeat 50% 0;}

All the best - redspyder

narf_bro
Jan 28th, 2009, 02:53 AM
This worked great. Thanks Redspyder!

Jesse