CODEWITHSUNDEEP
cssgradient
Qwerty
Qwerty

Reputation: 75

CSS gradient background no scaling, ends with one color

I'm trying to make a fixed-height CSS gradient background fade to one color but not repeat the gradient.

Here's a codepen.

html {
    height: 50px;
    margin: 0;
    padding: 0;
    background: yellow;
    background: -webkit-linear-gradient(orange, yellow);
    background: -o-linear-gradient(orange, yellow);
    background: -moz-linear-gradient(orange, yellow);
    background: linear-gradient(orange, yellow);
    background-repeat: no-repeat;
}

I want the gradient to end at a specified height and then have the background repeat one color. In the codepen, you can see the gradient ends, but then it's a white background; I want the background to be yellow. I want to do this completely in CSS (without using an image). Thanks.

Upvotes: 1

Views: 485

Answers (2)

Racil Hilan
Racil Hilan

Reputation: 25351

You set the height of your page (i.e. html) to 50px, so that all you get. To limit the size of the background, use the background-size CSS property. Here is an example:

html {
  background: yellow;
}

body {
  height: 500px;
  margin: 0;
  padding: 0;
  background: -webkit-linear-gradient(orange, yellow);
  background: -o-linear-gradient(orange, yellow);
  background: -moz-linear-gradient(orange, yellow);
  background: linear-gradient(orange, yellow);
  background-repeat: no-repeat;
  background-size: 100% 50px;
}

However, it is always recommended to use a div container inside the body rather than using html.

Upvotes: 0

lumio
lumio

Reputation: 7575

That's because you set the styling for your HTML tag to 50px. What you want is a wrapper inside your body like <div id="wrapper"></div> which you then can style and set to 100vh height.

Like this:

html, body {
  width: 100%
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: yellow;
}

#wrapper {
  width: 100%;
  height: 100vh;
  /* your background styles */
}

Upvotes: 1

Related Questions