CODEWITHSUNDEEP
htmlcss
David19801
David19801

Reputation: 11448

css gradiant background long page

I have a a background image on my html with css page, from blue at the top, to white at the bottom.

However, the image 400x800 and the page is much longer, so it repeats.

The page length varies all the time.

Is it possible to solve this so the background stretches to the page length somehow? or maye make it not repeat and make the background white with the image on top?

If yes, how please?

Upvotes: 1

Views: 539

Answers (3)

Anita Graham
Anita Graham

Reputation: 441

Another alternative is to make your gradient the same at both ends with the maximum colour difference at the 50% mark.

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76547

I know that there are jQuery / Javascript methods of accomplishing this:

Resizable Backgrounds with jQuery

Stretch background image - jQuery - Demo

but besides resorting to solutions like those - you could:

  • Select a pattern for your background that repeats (textures etc.)
  • Create a very long background image that could handle most navigation that your page would deal with.

Upvotes: 0

DA.
DA.

Reputation: 40673

The easiest is to set the image to not repeat and then set the background color the same as one end of the gradient:

body {
    background: white url('yourImage') repeat-x top left;
}

Getting a gradient to stretch to fit the window is doable, but is more work and would require some javascript.

Upvotes: 4

Related Questions