CODEWITHSUNDEEP
firefoxcsslinear-gradients
GZaidman
GZaidman

Reputation: 797

Linear gradients not working in Firefox 4

I recently tried applying a gradient background to a webpage using only CSS3. while testing out the following code:

body {background: -moz-linear-gradient(top, blue, white);}

The result was: firefox grads went wrong

Not exactly what I was looking for... Any idea what is going on? OS is Win7 64bit and Firefox 4. Thanks!

Upvotes: 1

Views: 1391

Answers (2)

Matijs
Matijs

Reputation: 3148

you may want to add no-repeat to that background property…

or set a height to the <body> (and the <html>) like so:

html { height: 100%; }
body { background: -moz-linear-gradient(top, blue, white); height: 100%; }

Upvotes: 1

Andrew Marshall
Andrew Marshall

Reputation: 96914

This is happening because the height of the body is small, and by default the background is repeating.

You can either make it not repeat:

body { background-repeat: no-repeat; }

or make the height of the container (html) the size of the window:

html { height: 100%; }

though note that the latter can sometimes have unexpected effects when scrolling.

Upvotes: 1

Related Questions