html - Div background image full height on browser -
i tried searching on google can't seem find solution problem make background image part of div appear full size , cover whole browser window. moving background image body element not possible (constraint theme using) , have tried using height:100% (which doesn't work) , height:100vh (which work background image extend more necessary.)
i have simplified problem this:
<body> <div id="topmenu">menu</div> <div id="box1"> <div id="box2"> <div id="box3"> <div id="homepage"> <div>text</div> </div> </div> </div> </div> </body> #homepage buried under several layers of div has background image extend full screen.
i have created fiddle understand talking about.
https://jsfiddle.net/6x08snnt/17/
thank help!
percentage height based off of parent's height. if html has no height, body {height: 100%;} won't anything.
in browsers body element has margin well, let's reset that.
assuming want 2 elements fill page, no scrolling, you'll need use calc() combine hard px value percentage.
#topmenu { height: 16px; background-color:red; } #homepage { height: calc(100% - 16px); background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:and9gctbqu-zynh0ewejzs4kd6dq0fkpr-eeuu_ohdv9zd8w1-5vv19n); background-repeat: no-repeat; background-size:cover; } html, body { height: 100%; } body { margin: 0; }<div id="topmenu">menu</div> <div id="homepage"> <div>text</div> </div>
Comments
Post a Comment