css - How to make the gradient border stay at the screen -


jsfiddle

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

enter image description here


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -