css - How to make the gradient border stay at the screen -
html
<div class="content">blabbles</div>
css
html, body { margin: 0; height: 100%; min-height: 100%; position: relative; } html{ border-image: linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat; border-width: 10px; }
attempted have gradient border stay around screen when content longer, content pass through , border scrolling up/down.
tried both: position: fixed , background-attachment: fixed doesn't make border stay on screen no matter whether content longer or shorter.
also how make content go through behind border if longer?
codepen http://jsfiddle.net/d3ckg18e/5/
css code (no need set height
/min-height
html
or body
element
body:before { box-sizing : border-box; position : fixed; z-index : 1; height : 100vh; width : 100%; content : ""; border-image : linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat; border-width : 10px; pointer-events: none; } .content { padding: 15px; }
result
Comments
Post a Comment