CODEWITHSUNDEEP
cssgradient
user1058367
user1058367

Reputation: 81

CSS3 gradient not scrolling properly

Here is my site here: Link

I've looked around for a bit but couldn't find what I was looking for. I'm attempting to use CSS gradient for my website background but it is not resizing properly. Instead it will repeat itself when you have to scroll. Even with background-repeat set to no repeat, I am still having this problem. Anyone know what my problem is? Here is my css.

html{
height:100%;
}
body {font: 14px/normal Tahoma, Arial, Helvetica, sans-serif; 
height: 100%;
min-height:100%;
margin:0;
background-repeat:no-repeat;
background-attachment:fixed;

background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#ccc)); 

  background-image: -moz-linear-gradient(top, #000, #ccc);

  background-image: -o-linear-gradient(top, #000, #ccc);

  background-image: linear-gradient(top, #000, #ccc);  

}

Upvotes: 5

Views: 6551

Answers (4)

SteveHippy
SteveHippy

Reputation: 21

You need to do in order

    background-repeat:no-repeat;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#ccc)); 
    background-attachment:fixed;

That should work

Upvotes: 2

Ivan Prishvin
Ivan Prishvin

Reputation: 51

background:url(/_pix/bg.png) repeat,-webkit-gradient(linear,left top,left bottom,color-stop(0,#C8AA86),color-stop(1,#664927));
background:url(/_pix/bg.png) repeat,-webkit-linear-gradient(top,#C8AA86 0%,#664927 100%);
background:url(/_pix/bg.png) repeat,-moz-linear-gradient(top,#C8AA86 0%,#664927 100%);
background:url(/_pix/bg.png) repeat,-ms-linear-gradient(top,#C8AA86 0%,#664927 100%);
background:url(/_pix/bg.png) repeat,-o-linear-gradient(top,#C8AA86 0%,#664927 100%);
background:url(/_pix/bg.png) repeat,linear-gradient(top,#C8AA86 0%,#664927 100%);
background-attachment:fixed;

Upvotes: 5

Sajid
Sajid

Reputation: 4421

Just set background-color to #ccc and the problem should go away. The rest of your page will simply be #ccc. It's a limitation of gradients + background-size. In theory, background-size:cover should fix this correctly, but it doesn't seem to do so because of the interaction of the various specs.

background-attachment:fixed actually fixes the background so it never scrolls, which solves the problem, but adds that visual artifact.

Upvotes: 2

DiogoDoreto
DiogoDoreto

Reputation: 883

The background-attachment:fixed do what you want, but next you are setting background: and overwriting that value. Replace it with background-image and you are done.

Upvotes: 8

Related Questions