javascript - Getting the new height of backround image when using CSS background-size: cover? -

i'm using background-size: cover; in css , whilst works well, have noticed once "kicks in" may have issues whole height of background image not displaying.

for example, have code this:

#home .top {     min-height: 768px;     background: #fff url('../images/home-bg-lg.jpg') center top no-repeat;     background-size: cover;     -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover; } 

now, min-height: 768px; refers actual height of image, set make sure shows full height regardless of content; once background size starts increase height increases , hence 768px size no longer large enough , lot of background not shown.

is there anyway fix css, if not, how javascript, preferably jquery?

if javascript/jquery solution may worth mentioning use breakpoints , utilise smaller background images @ smaller resolutions; nothing needs applied these.

edit: clarify, wondering if possible when expands shows full height of image. example if using image 1600 x 768 , viewed on 1920 x 900 resolution expand 1920px width , hence if min-height change 922px correct height of now?

i assumed have background's original dimensions, if not here's how can it

var bgw = 1600; var bgh = 768;  function coverbg() {     var el = $('#home .top');     var elw = el.outerwidth();     var elh = el.outerheight();     var newheight = elw*bgh/bgw;     el.css('height', newheight); }