Design that "slides out" of the left side of the browser as you make the browser bigger?

I'm trying to build a blog. I would like to create a design that essentially slides out more of the picture when you drag the browser handle to the right, and slides in to a certain point when you drag the browser handle to the left. How do you do this in css??

EDIT: I'm thinking you could use a float:right, width:100%, overflow:hidden, combination or something..

Thanks! Matt 开发者_运维知识库Mueller

Okay. I knew I was missing something. Maybe I just wasn't explaining the question well enough.. either way.. This is what I did.

#header {
background('header.png') top right repeat-x
width: 100%;
}

Now as long as I make sure the background is repeatable, I'll be in good shape.

You will need to use JavaScript. Do you mean the browser handle as in the scrollbar?

This might also be a bad idea considering how much of the net is accessed today on handheld systems. Also, performance may suffer if a large image is being moved around per resizing.

You have to wire an onresize event for the window object using javascript.

window.onresize

An event handler for the resize event on the window.