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); }

Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more