psycoperl Posted June 20, 2019 Share Posted June 20, 2019 I am creating a background gradient and would like for it to either just stay on the screen background and not repeat during scrolling) For pages with really really long content I would like to have the gradient applied to the entire content and scroll with the page but not repeat. How can I update the following part of CSS Thanks html{ height:100%; max-height:100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#05336b+0,3949ab+100 */ background: #05336b; /* Old browsers */ background: -moz-linear-gradient(top, #05336b 0%, #3949ab 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05336b), color-stop(100%,#3949ab)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(top, #05336b 0%,#3949ab 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(top, #05336b 0%,#3949ab 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(top, #05336b 0%,#3949ab 100%); /* IE10 preview */ background: linear-gradient(to bottom, #05336b 0%,#3949ab 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05336b', endColorstr='#3949ab',GradientType=0 ); /* IE6-9 */ } Link to comment Share on other sites More sharing options...
Ingolme Posted June 20, 2019 Share Posted June 20, 2019 background-attachment: fixed; should keep the gradient in place. Link to comment Share on other sites More sharing options...
psycoperl Posted June 21, 2019 Author Share Posted June 21, 2019 Ok Thank you. Is there a way to have it stretch the entire length of document? Link to comment Share on other sites More sharing options...
Ingolme Posted June 21, 2019 Share Posted June 21, 2019 You're restricting the height to the window size by setting it to 100%. You will have to remove that height declaration to make it stretch to the entire length of the document. If you need that 100% height for layout reasons then you can put the gradient in the body instead. The body cannot have a height rule then, but you can give it a min-height to make sure the gradient is still large enough even if the content is short. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now