如何将线性渐变宽度修改为100％？

Question

I have a linear gradient with red at the top going to white at the bottom in my footer CSS. I want the gradient to be the width of the display without black margins to the left and right. I have similar code in my header markup for a solid red line that does not have black margins.

CSS

body { font-family: Arial; background-color: $black; width: 100%; font-size: 18px; margin:0 auto; }
footer, header { font-family: Eurostile; padding-top: 15px; margin:0 auto; .row { .row-col-img-padding { [class*="col-"] { padding-left: 0px !important; padding-right: 0px !important; } } } }
footer {
    color: $gray; font-weight: bold; font-style: italic; font-size: 90%; line-height: 100%; a { color: $bluedark; } 
    background: red; 
    background: linear-gradient($red, $white);
    background: -khtml-linear-gradient($red, $white); 
    background: -moz-linear-gradient($red, $white); 
    background: -ms-linear-gradient($red, $white); 
    background: -o-linear-gradient($red, $white); 
    background: -webkit-linear-gradient($red, $white); 
}
header { background-color: $black; p { color: $grayLight; font-weight: bold; font-size: 100%; line-height: 100%; } }

CSS for solid line in header where the red line fills up the screen with no margins.

#back-red { background-color: $red; padding-bottom: 15px; }

Markup

<footer class="footer">
  <div class="row row-col-img-padding">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
      <ul class="list-inline">
        <li><%= link_to image_tag("footer-facebook-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Facebook"), "https://www.facebook.com/xxxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-twitter-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Twitter"), "https://twitter.com/xxxxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-linkedin-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "LinkedIn"), "http://www.linkedin.com/company/xxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-linkedin-bernard-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash1}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-linkedin-pam-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash2}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
      </ul>
    </div>
  </div>
  <div class="row row-col-img-padding">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
      <%= link_to image_tag("footer-privacypolicy-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :privacy_head1}"), privacy_path %>
      <div class="footer-links">
        <%= link_to "#{t :footer_link1}", locale_root_path %>
        <%= link_to "#{t :footer_link3}", system_path %>
        <%= link_to "#{t :footer_link4}", manage_path %>
        <%= link_to "#{t :footer_link6}", clients_path %>
        <%= link_to "#{t :footer_link2}", about_path %>
        <%= link_to "#{t :footer_link5}", contact_path %>
        <%= link_to "#{t :footer_link7}", media_path %><br>
        <%= link_to "Facebook", "https://www.facebook.com/LightBeCorp", target: '_blank' %>
        <%= link_to "Twitter", "https://twitter.com/lightbecorp", target: '_blank' %>
        <%= link_to "LinkedIn", "http://www.linkedin.com/company/lightbe-corp", target: '_blank' %>
        <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/bernarddreyer", target: '_blank' %>
        <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/pamelacooktulsaok", target: '_blank' %><br>
        <%= link_to "#{t :footer_link9}", privacy_path %>
        <%= link_to_unless_current "#{t :english}", locale: "en" %>
        <%= link_to_unless_current "Français", locale: "fr" %>
      </div>
      <p class="text-red-pad-top-10"><%= "#{t :footer2}" %> <span class="text-red">Light</span><span class="text-bluedark">Be</span> ©2010-<%= Time.now.strftime("%Y") %> - <%= "#{t :footer3}" %></p>
    </div>
  </div>
</footer>

Markup for header

<header class="header">
  <div class="row row-col-img-padding" id="pad-bottom-15">
    <p class="locale-line" align="center"><span class="english-link"><%= link_to_unless_current "#{t :english}", locale: "en" %></span><%= link_to_unless_current "#{t :french}", locale: "fr" %></p>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center" id="header-images">
      <div class="page-class" align="center">
        <ul>
          <li><%= link_to image_tag("menu-home.jpg", class: "img-responsive aspect", alt: "#{t :footer_link1}"), locale_root_path %></li>
          <li><%= link_to image_tag("menu-manage-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link4}"), manage_path %></li>
          <li><%= link_to image_tag("menu-system-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link3}"), system_path %></li>
          <li><%= link_to image_tag("menu-media-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link7}"), media_path %></li>
          <li><%= link_to image_tag("menu-clients-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link6}"), clients_path %></li>
          <li><%= link_to image_tag("menu-about-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link2}"), about_path %></li>
          <li><%= link_to image_tag("menu-contact-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link5}"), contact_path %></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row row-col-img-padding" id="back-red">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
      <h1><%= @page_title %></h1>
      <% if params[:action] == "system" && I18n.locale.to_s == "fr" %>
      <% else %>
        <p><%= @page_abstract1 %></p>
        <p><%= @page_abstract2 %></p>
        <p><%= @page_abstract3 %></p>
        <p><%= @page_abstract4 %></p>
        <p><%= @page_abstract5 %></p>
      <% end %>
      <p><%= @page_abstract6 %></p>
      <% if params[:action] == "system" && I18n.locale.to_s == "fr" %>
      <% else %>
        <p><%= @page_abstract7 %></p>
      <% end %>
    </div>
  </div>
</header>

Ruby on Rails application.html.erb

  <body>
    <div class="container-fluid"> 
      <%= render 'layouts/header' %> <!-- update app/views/layouts/_systemmessage.html.erb when you need to reboot the server -->
      <%= render 'layouts/systemmessage' %>
      <% flash.each do |key, value| %>
        <%= content_tag(:div, value, class: "alert alert-#{key}") %>
      <% end %>
      <%= yield %>
      <%= render 'layouts/contact_footer' %>
      <%= render 'layouts/footer' %>
    </div>
    <%= javascript_include_tag "application" %>
    <%= debug(params) if Rails.env.development? %>
  </body>

The images below shows how my CSS works at widths 500px and 320px. The links and the images are using CSS .footer-links. They spread to the edge of the screen but the gradient does not.

CSS below

.footer-links { width: 1024px; padding-top: 10px; a { padding-left: 5px; padding-right: 5px; } }

@media screen and (max-width: 1024px) { body, footer, header, .box-message, .footer-links, .page-class, .red-line-1px { max-width: 100%; } }

Since the header and footer are within body I assume my problem is with the gradient width. I have seen many posts related to linear gradients and widths but I could not find anything that explained exactly how I need to change my CSS to get this working.

Answer 1

You could try

background-size: 100% 100%;

You might not need both 100% on horizontal and vertical, but give it a try.

It is hard to see without your HTML. And you might need browser specific CSS also eg

-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;

Answer 2

Okay. Copied your code, removed some css, and as I thought, the footer behaves as the block level element it is. Which means the margins on footer is due to something else than the code you provided, or it is in the code I took out of your css (although it shouldn't be).

And, if you had mentioned that you were using some sort of framework, and actually posted the CSS, not whatever non-built *CSS you have, this would have been easier. Also, had you made it into a fiddle, you would see that it is 100% wide. So, the problem is either because that footer is wrapped in something else (another div?), or because your example or code is not the actual code. Stop using framework-specific code in examples. At least when you don't mention what framework you're using.

 body { font-family: Arial; background-color: black; width: 100%; font-size: 18px; margin:0 auto; } footer { color: gray; font-weight: bold; font-style: italic; font-size: 90%; line-height: 100%; background: red; background: linear-gradient(red, white); background: -khtml-linear-gradient(red, white); background: -moz-linear-gradient(red, white); background: -ms-linear-gradient(red, white); background: -o-linear-gradient(red,white); background: -webkit-linear-gradient(red, white); } #back-red { background-color: red; padding-bottom: 15px; } 

 <footer class="footer"> <div class="row row-col-img-padding"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center"> <ul class="list-inline"> <li><%= link_to image_tag("footer-facebook-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Facebook"), "https://www.facebook.com/xxxxxxx", target: '_blank' %></li> <li><%= link_to image_tag("footer-twitter-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Twitter"), "https://twitter.com/xxxxxxxx", target: '_blank' %></li> <li><%= link_to image_tag("footer-linkedin-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "LinkedIn"), "http://www.linkedin.com/company/xxxxxx", target: '_blank' %></li> <li><%= link_to image_tag("footer-linkedin-bernard-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash1}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li> <li><%= link_to image_tag("footer-linkedin-pam-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash2}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li> </ul> </div> </div> <div class="row row-col-img-padding"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center"> <%= link_to image_tag("footer-privacypolicy-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :privacy_head1}"), privacy_path %> <div class="footer-links"> <%= link_to "#{t :footer_link1}", locale_root_path %> <%= link_to "#{t :footer_link3}", system_path %> <%= link_to "#{t :footer_link4}", manage_path %> <%= link_to "#{t :footer_link6}", clients_path %> <%= link_to "#{t :footer_link2}", about_path %> <%= link_to "#{t :footer_link5}", contact_path %> <%= link_to "#{t :footer_link7}", media_path %><br> <%= link_to "Facebook", "https://www.facebook.com/LightBeCorp", target: '_blank' %> <%= link_to "Twitter", "https://twitter.com/lightbecorp", target: '_blank' %> <%= link_to "LinkedIn", "http://www.linkedin.com/company/lightbe-corp", target: '_blank' %> <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/bernarddreyer", target: '_blank' %> <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/pamelacooktulsaok", target: '_blank' %><br> <%= link_to "#{t :footer_link9}", privacy_path %> <%= link_to_unless_current "#{t :english}", locale: "en" %> <%= link_to_unless_current "Français", locale: "fr" %> </div> <p class="text-red-pad-top-10"><%= "#{t :footer2}" %> <span class="text-red">Light</span><span class="text-bluedark">Be</span> ©2010-<%= Time.now.strftime("%Y") %> - <%= "#{t :footer3}" %></p> </div> </div> </footer> 

Answer 3

Bootstraps .container-fluid rule looks like this

{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}

So for your footer to work, you could do like this, where the major change is to add a wrapper <div class="row"> and then remove the row class from <div class="row-col-img-padding"> , and then set the gradient on the wrapper

Markup for footer

  <footer class="footer">
    <div class="row">
      <div class="row-col-img-padding">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
          <ul class="list-inline">
            <li><%= link_to image_tag("footer-facebook-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Facebook"), "https://www.facebook.com/xxxxxxx", target: '_blank' %></li>
            <li><%= link_to image_tag("footer-twitter-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Twitter"), "https://twitter.com/xxxxxxxx", target: '_blank' %></li>
            <li><%= link_to image_tag("footer-linkedin-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "LinkedIn"), "http://www.linkedin.com/company/xxxxxx", target: '_blank' %></li>
            <li><%= link_to image_tag("footer-linkedin-bernard-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash1}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
            <li><%= link_to image_tag("footer-linkedin-pam-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash2}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
          </ul>
        </div>
      </div>
      <div class="row-col-img-padding">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
          <%= link_to image_tag("footer-privacypolicy-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :privacy_head1}"), privacy_path %>
          <div class="footer-links">
            <%= link_to "#{t :footer_link1}", locale_root_path %>
            <%= link_to "#{t :footer_link3}", system_path %>
            <%= link_to "#{t :footer_link4}", manage_path %>
            <%= link_to "#{t :footer_link6}", clients_path %>
            <%= link_to "#{t :footer_link2}", about_path %>
            <%= link_to "#{t :footer_link5}", contact_path %>
            <%= link_to "#{t :footer_link7}", media_path %><br>
            <%= link_to "Facebook", "https://www.facebook.com/LightBeCorp", target: '_blank' %>
            <%= link_to "Twitter", "https://twitter.com/lightbecorp", target: '_blank' %>
            <%= link_to "LinkedIn", "http://www.linkedin.com/company/lightbe-corp", target: '_blank' %>
            <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/bernarddreyer", target: '_blank' %>
            <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/pamelacooktulsaok", target: '_blank' %><br>
            <%= link_to "#{t :footer_link9}", privacy_path %>
            <%= link_to_unless_current "#{t :english}", locale: "en" %>
            <%= link_to_unless_current "Français", locale: "fr" %>
          </div>
          <p class="text-red-pad-top-10"><%= "#{t :footer2}" %> <span class="text-red">Light</span><span class="text-bluedark">Be</span> ©2010-<%= Time.now.strftime("%Y") %> - <%= "#{t :footer3}" %></p>
        </div>
      </div>
    </div>
  </footer>

Change your CSS footer rule to this

footer {
    padding-top: 0
}

Move content of existing footer rule to a new rule, footer > .row , like this

footer > .row {
    padding-top: 15px;     /*  added new property  */

    color: $gray; font-weight: bold; font-style: italic; font-size: 90%; line-height: 100%; a { color: $bluedark; } 
    background: red; 
    background: linear-gradient($red, $white);
    background: -khtml-linear-gradient($red, $white); 
    background: -moz-linear-gradient($red, $white); 
    background: -ms-linear-gradient($red, $white); 
    background: -o-linear-gradient($red, $white); 
    background: -webkit-linear-gradient($red, $white); 
}