html - Multiple Background images different sizes -

i'm building site friend , have 1 background image covering body using following css:

body { background: url("backgroundoriginal.jpeg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; overflow-x: hidden; } 

he wants photo cover 25% of page , have either photo or plain white background covering rest.

how this? have rid of background image in body tag , use divs instead or there easier way?

you can make css3

body {    background-image: url(images/image1.png), url(images/image2.png);    background-repeat: repeat-x, repeat; } 

http://www.css3.info/preview/multiple-backgrounds/

the current versions of major browsers support it, if need support ie8 or below, best way can work around have divs: http://caniuse.com/#search=multiple%20backgrounds