CODEWITHSUNDEEP
css
user3562751
user3562751

Reputation: 263

CSS - background gradient not covering whole page as it grows

I have a page with an accordion and the background does not fill the whole page when the accordion opens.

Below is what I have tried so far.

.models-background {
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(top, #666666 0%, #E6E6E6 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(top, #666666 0%, #E6E6E6 100%);

  /* Opera */ 
  background-image: -o-linear-gradient(top, #666666 0%, #E6E6E6 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, #E6E6E6));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(top, #666666 0%, #E6E6E6 100%);

  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to bottom, #666666 0%, #E6E6E6 100%);

  background-size: 100% 100%;

  background-repeat: no-repeat;

  background-size: cover;
}

Upvotes: 1

Views: 1580

Answers (1)

Assan Sanogo
Assan Sanogo

Reputation: 41

add at the beginning of the CSS code:

{

min-height: 100% ;
min-width: 100% ;

<!-- add your stuff :) -->
}

If you want to refer to other posts:

previous question 1: Scaling gradient Previous question 2: Scaling background

Hope it helps.

Upvotes: 1

Related Questions