CODEWITHSUNDEEP
cssbackgroundgradient
Tom Ward
Tom Ward

Reputation: 21

Scaling gradient backgrounds in CSS

first time asking, please go easy on me

I'm trying to make a background gradient for a web app that uses JQuery Mobile. I'm clueless about CSS and UI design in general.

I want the gradient to fill the entire page's space. Right now, it fills up to the original window's size, but "cuts off" when scrolling down.

Most suggestions point to this:

html 
{
  height: 100%;
}

...which doesn't work for me. Here is what I have:

content: " ";
width: 100%;
height: 100%;
float: left;
position: relative;
z-index: -1;
top: 0;
left: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0.5) 100%) fixed;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0.5))) fixed;
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%)fixed;
 background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;     background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
 background: linear-gradient(135deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Upvotes: 2

Views: 3039

Answers (1)

Jason
Jason

Reputation: 3360

This problem happens sometimes when you use height:100%;. Since it means to fill 100% of the browser window, it doesn't fill the rest because that would be past 100%.

Try tweaking it a little and writing it like this:

html 
{
  min-height: 100%;
}

Now it can fill past 100% so it should fill the rest of the background.

Upvotes: 3

Related Questions