Menu
I have a cross-browser CSS gradient, such as this:
#background {
background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
}
But I need it to span the height of the entire page, not just the viewport. In other words, I need to apply the style to an element that has the same height as the entire page, which would usually be body or html.
Further complications:
I'm also using the sticky footer, which requires html and body to be set to 100% height. So applying the style to them results in only the viewport being filled.
I'm not even sure if what I'm asking is possible, but any help would be appreciated.
395
CSS Linear Gradients To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
repeating-linear-gradient() The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.
You can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with the radial-gradient() function), and conic (created with the conic-gradient() function).
html body {
min-height: 100%;
}
It will do the trick, the min-height property spans the total height even if the page is scrollable, but height property sets the height of active view-port as 100%.
This works cross browser!
68
Based on Kyle's solution, as well as the other styles from the sticky footer, here is the solution that finally worked:
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -250px;
background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */ } /* corresponds to height of #footer */
#body-wrapper {
height: 100%;
width: 100%;
}
With the following html:
<body>
<div id="body-wrapper">
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With