“before and after” background

Question

Is there a way to use a "Before and after" image as a full sized background? Would be great i guess! I am trying to use such examples as a full page size image;

http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

http://www.queness.com/post/6480/create-an-attractive-before-and-after-photo-effect-with-jquery

But everytime i try this the second 'reveal' div doesn't size 100% to the browser borders.

Can anyone push me in the right direction?

Thanks

Tried to edit this to full width, but i cant get it to work in 100%. http://jsfiddle.net/xQCUP/1/ — Joey, Mar 29 '13 at 13:07
Are you asking how to [stretch a background image](http://stackoverflow.com/questions/5662735/stretch-background-image-css)? — epascarello, Mar 29 '13 at 13:09
That's indeed what i ask, but not just the normal stretch. I want to use the "Before and After" effect like the examples as a full stretch background. — Joey, Mar 29 '13 at 14:28

score 0 · Answer 1 · answered Apr 03 '13 at 07:25

CSS3 have this feature W3School CSS3 Background but this will not work in old browser
another alternate way is.. Set the Main Background Image to Body tag. After create a DIV tag and add this style:

.mydiv{
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    background-image:url('my/url.jpg');
    background-position:right top;
}

remember dont use this div for contents. it is just for holding your bg image.

“before and after” background

1 Answers1