javascript - How to scale background image based on white space with CSS -


i need scale background image based on white space left content div. here sample code:

<body class="ms-backgroundimage">     <div id="s4-workspace">         <div id="contentrow">             custom content here.         </div>         (transparent white space here background scales.)     </div> </body> 

for example, if #contentrow height 60% of viewport , white space in #s4-workspace 40%, need background image has height of 40% - 50px of viewport. , if #contentrow 90% i'd need background image height 10% - 50px (if possible).

limitations: because sharepoint system, i'd prefer css modifications rather html (i.e. masterpage). external javascript/jquery ok if not possible otherwise.

assuming supporting following browsers: http://caniuse.com/#search=calc

you can use css calc() method.

for specific scenario:

i need background image has height of 40% - 50px of viewport.

you can use following css:

selector{height:calc(40vh - 50px);}


Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -