CODEWITHSUNDEEP
htmlcss
Rasmita Dash
Rasmita Dash

Reputation: 937

Restrict size of radial gradient on an element

enter image description hereI have a section which is taking 100% width & 100% Height. I need a radial gradient (#5E88B2 at center & #06305A outer)of 100% width & 100px height on it. So there should radial gradient on top 100px & after that default color(white) should continue. I know how to achieve it with Linear gradient. But, How to do it with radial gradient?

.Content {
  border-top: 10px solid #666666;
  background-size: 100%;
  background: #5E88B2;
  background: -moz-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #5E88B2));
  background: -webkit-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -o-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -ms-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: radial-gradient(ellipse at center, #5E88B2 0%, #06305a 100%);
}
.MainContent{ background-color: #ffffff; border-radius: 5px; margin-top: 3%;margin-left: auto;
margin-right: auto; padding-left: 15px; padding-right: 15px;clear: both;display: table; width:300px;}
<section style="background-color:#fff;">This is header</section>
<section id="OuterSection" class="container-fluid Content">
  <section class="container MainContent">
    <!-- Main Markup -->
    Content<br>Content<br>Content<br>Content<br>Content<br> Content<br>Content<br>
    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>
  </section>
</section>
<section style="background-color:#eee;">This is footer</section>

Currently it's taking full height. But,I need radial gradient of 100px height from top of "OuterSection"

Upvotes: 2

Views: 610

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272236

You can constrain the background image size using background-size and background-repeat properties.

.Content {
  border-top: 10px solid #666666;
  background: #5E88B2;
  background: -moz-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #5E88B2));
  background: -webkit-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -o-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -ms-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: radial-gradient(ellipse at center, #5E88B2 0%, #06305a 100%);
  background-size: 100% 100px;
  background-repeat: no-repeat;
}
.MainContent {
  background-color: #ffffff;
  border-radius: 5px;
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  clear: both;
  display: table;
  width: 300px;
}
<section style="background-color: #ffffff;">This is header</section>
<section id="OuterSection" class="container-fluid Content">
  <section class="container MainContent">
    <!-- Main Markup -->
    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>
    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>
  </section>
</section>
<section style="background-color: #eeeeee;">This is footer</section>

Upvotes: 3

Related Questions