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

Question

Hey all,

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

Answer 1

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.

Answer 2

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.

Answer 3

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.