html - Background image in div getting cut off at top and bottom when page is too short -

html - Background image in div getting cut off at top and bottom when page is too short -

i'm super new @ css, may simple. i've searched bunch reply question, haven't found yet. div, containing logo stretch , scale depending on page size, , pretty much have working, if page short, top , bottom of background image cutting off. here's site can see what's happening.

chaptertwollc.com

and here's relevent css.

.centerlogo { height: 50%; width: 50%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; text-align: center; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; visibility: visible; background-repeat: no-repeat; background-image: url(../pop%20high%20res%20logo%20ellipse%20black%20glow%20webop.png); background-size: 100%; background-position: center center; background-attachment: scroll; }

edit: got working. simple changing

background-size: 100%;

to

background-size: contain;

cross browser solution svoka used wrong css value...

-webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain;

contain tells rendering engine ensure background fits in container without changing aspect ratio.

html css background scale