Jump to content

CSS Gradient Backround - No repeat


Recommended Posts

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




			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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...