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
Post a Comment