Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS background challenge Re: background challenge

#46737
johnstevens
Member
"chriscoyier" wrote:
Hey John,

Interesting challenge. I think this simple solution does the trick:

Code:
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}

Check out the example:
https://css-tricks.com/examples/SplitBackgroundPattern/

Cutting your image up didn’t line up quite right, but the theory seems to work.

Hey Chris,

Thanks for the help, it’s almost perfect, on 1px left. I guess that is because when you multiply an odd number of pixels by 50% you always have 1px left. In the middle we have depending of the window size, sometimes a white line.

Look at the idea we try to achive here: http://www.juniorkidsevent.nl/intro.html

Its has other bugs asswel by the way :) But thats for later….