Setting linear gradient height AND width
To clarify, the code in the question is not setting the height and width of the gradient. It's adjusting the color stops, which results in a grey rectangle.
In order to adjust the actual dimensions of the gradient, we need to use the background-size property (as well as background-repeat) to set the height and width of the gradient.
With background-size in control of the gradient's dimensions, we can rewrite the CSS to be as follows:
.grey-block {
background-color: white;
background-image: linear-gradient(#f9f9f9, #f9f9f9);
background-size: 35% 65%;
background-repeat: no-repeat;
}
What's happening is that we're defining a "gradient" of a solid color and confining it's size. The background-repeat is disabled so that it will only render a single grey block.
.grey-block { background-color: white; background-image: linear-gradient(#f9f9f9, #f9f9f9); background-size: 35% 65%; background-repeat: no-repeat;}
/* non-relevant styles */body { background-color: #222;}.grey-block { height: 200px; width: 200px;}<div class="grey-block"></div>Can I position and size a linear-gradient within the background?
Never forget background-repeat
html {
min-height: 100%;
background-image:
linear-gradient(to right, #00000000 0%, #00000000 15%, #000000ff calc(100% - 40rem)),
linear-gradient(to right, #000000ff 0%, #000000ff 100%),
url("https://picsum.photos/id/1069/800/800");
background-size: cover, 40rem 4rem, auto;
background-position: top left, 0rem 3rem, top left;
background-repeat:no-repeat; /* this is important !! */
}CSS gradient: define width in pixels
If you want that black part was flexible and red part was fixed you could use something like this:
html{height:100%;}
.test_gradient {
background: #000000;
position:relative;
margin:0;
height:100%;
}
.test_gradient:after{
content:'';
position:absolute;
top:0;
height:100%;
width:500px;
left:50%;
margin-left:-250px;
background:#f00;
}
DEMO
Gradient that stops at a particular height and continues further with a solid color
height: 400px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
You might have to play with 0.75 as it's a percentage of your height, but that should do the trick.
Can a linear gradient be a different size than its container?
You can define a size and position for a gradient
:root { --start: 8.0rem; }
html { font-size: 62.5% }
div {
width: 50px;
height: 20.0rem;
background:
repeating-linear-gradient(black 0 0.1rem,#0000 0 0.3rem)
center/ /* position */
60% 1.6rem /* size (width height) */
no-repeat /* don't repeat */
rgb(200,200,200); /* background color */
}<div></div>Linear gradient with custom size
Assuming that all items have equal widths, then the gradient should start at the midpoint of 1 and end at the midpoint of 5, which means it should start at the 10% mark and end at the 90% mark, something like linear-gradient(to right, transparent 10%, grey 10%, grey 90%, transparent 90%).
To restrict the size of the background, you can use background-size: 100% [DESIRED_HEIGHT] to control it. Say you want the bar to be 16px thick, then you can use background-size: 100% 16px. Combine that with background-repeat: no-repeat to avoid the gradient from repeating, and background-position: center center to center it.
See proof-of-concept example:
body {
font-family: Arial, sans-serif;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: space-around;
background-image: linear-gradient(to right, transparent 10%, grey 10%, grey 90%, transparent 90%);
background-size: 100% 8px;
background-repeat: no-repeat;
background-position: center center;
}
ul.colors {
background-image: linear-gradient(
to right,
transparent 10%,
red 10%,
red 30%,
orange 30%,
orange 50%,
green 50%,
green 70%,
blue 70%,
blue 90%,
transparent 90%
);
}
ul li {
display: block;
width: 48px;
height: 48px;
border: 1px solid #999;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}<strong>Plain</strong>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<br /><br />
<strong>Colors</strong>
<ul class="colors">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>fixed background gradient with dynamic width
I've taken your snippet and replaced your % values on the gradient with an absolute pixel value. I've also inverted the gradient so it goes from left to right, from red to the other color. You can check that if you modify the width of the bar, the red still remains visible.
background: linear-gradient(to right, red, #C7D9F8 30px);
Full snippet below:
function changeWidth(){ $("#hp").css("width","10%");}
function reset(){ $("#hp").css("width","30%");}#cont {width:170px; height:170px; background:#000; position:relative}#hp { position: absolute; bottom: 5%; width: 30%; height: 10px; background: linear-gradient(to right, red, #C7D9F8 30px); left: 5%; transition: all 1s;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><div id="cont"> <div id="hp"></div></div>
<button onclick="changeWidth()"> Run</button><button onclick="reset()"> Reset</button>how can I set my gradient background in css for full width and height of the page?
Here it is:
Wrap the template code inside a div (I give it the ID #gradient), then set width and height for it. Other things are the same as on CodePen and Bootstrap Cover template.
#gradient {
width: 100vw;
height: 100vh;
}
var colors = new Array( [62,35,255], [60,255,60], [255,35,98], [45,175,230], [255,0,255], [255,128,0]);
var step = 0;//color table indices for: // current color left// next color left// current color right// next color rightvar colorIndices = [0,1,2,3];
//transition speedvar gradientSpeed = 0.002;
function updateGradient(){ if ( $===undefined ) return; var c0_0 = colors[colorIndices[0]];var c0_1 = colors[colorIndices[1]];var c1_0 = colors[colorIndices[2]];var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);var color1 = "rgb("+r1+","+g1+","+b1+")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);var color2 = "rgb("+r2+","+g2+","+b2+")";
$('#gradient').css({ background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({ background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}); step += gradientSpeed; if ( step >= 1 ) { step %= 1; colorIndices[0] = colorIndices[1]; colorIndices[2] = colorIndices[3]; //pick two new target color indices //do not pick the same as the current one colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; }}
setInterval(updateGradient,10);/** Globals*/
/* Links */a,a:focus,a:hover { color: #fff;}
/* Custom default button */.btn-default,.btn-default:hover,.btn-default:focus { color: #333; text-shadow: none; /* Prevent inheritance from `body` */ background-color: #fff; border: 1px solid #fff;}
/** Base structure*/
html,body { height: 100%; background-color: #333;}body { color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5);}
/* Extra markup and styles for table-esque vertical and horizontal centering */.site-wrapper { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); box-shadow: inset 0 0 100px rgba(0,0,0,.5);}.site-wrapper-inner { display: table-cell; vertical-align: top;}.cover-container { margin-right: auto; margin-left: auto;}
/* Padding for spacing */.inner { padding: 30px;}
/** Header*/.masthead-brand { margin-top: 10px; margin-bottom: 10px;}
.masthead-nav > li { display: inline-block;}.masthead-nav > li + li { margin-left: 20px;}.masthead-nav > li > a { padding-right: 0; padding-left: 0; font-size: 16px; font-weight: bold; color: #fff; /* IE8 proofing */ color: rgba(255,255,255,.75); border-bottom: 2px solid transparent;}.masthead-nav > li > a:hover,.masthead-nav > li > a:focus { background-color: transparent; border-bottom-color: #a9a9a9; border-bottom-color: rgba(255,255,255,.25);}.masthead-nav > .active > a,.masthead-nav > .active > a:hover,.masthead-nav > .active > a:focus { color: #fff; border-bottom-color: #fff;}
@media (min-width: 768px) { .masthead-brand { float: left; } .masthead-nav { float: right; }}
/** Cover*/
.cover { padding: 0 20px;}.cover .btn-lg { padding: 10px 20px; font-weight: bold;}
/** Footer*/
.mastfoot { color: #999; /* IE8 proofing */ color: rgba(255,255,255,.5);}
/** Affix and center*/
@media (min-width: 768px) { /* Pull out the header and footer */ .masthead { position: fixed; top: 0; } .mastfoot { position: fixed; bottom: 0; } /* Start the vertical centering */ .site-wrapper-inner { vertical-align: middle; } /* Handle the widths */ .masthead, .mastfoot, .cover-container { width: 100%; /* Must be percentage or pixels for horizontal alignment */ }}
@media (min-width: 992px) { .masthead, .mastfoot, .cover-container { width: 700px; }}
#gradient { width: 100%; height: 100vh;}<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div id="gradient">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix"> <div class="inner"> <h3 class="masthead-brand">Cover</h3> <nav> <ul class="nav masthead-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </div>
<div class="inner cover"> <h1 class="cover-heading">Cover your page.</h1> <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> <p class="lead"> <a href="#" class="btn btn-lg btn-default">Learn more</a> </p> </div>
<div class="mastfoot"> <div class="inner"> <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> </div> </div>
</div>
</div>
</div>
</div>How Do I Modify My Linear Gradient Width to 100%?
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);
}
linear-gradient not full height of body
You need to set your html and body height to 100%;
html, body {
height: 100%;
}
Related Topics
Change Background Colour as Page Scroll Without Jquery
Why Is Fixed Background Image on Chrome Not Working
Flexbox Does Not Work in Safari, Striked Out in Web Inspector
Chrome Is Now Blurring Text When Using Transform Translatey with Percent
CSS Media Queries for Print Paper Size
Some Classes Have No Effect After Adding Tailwind.CSS to a Vue.Js Project
Centering in CSS, When The Object Is Larger Than The Viewport
Styles Based on Number of Children
Create Loading Messages That Will Change Based on Loading Time of Plot in a Shiny App
Fade Background Images with CSS3
Why Does a Rect Require Width and Height Attribute in Firefox
Hover Effect on Another Class in CSS
Chrome Will Increase The Font Size When Zooming Out
Build a Proper Alignment for a Footer
Rails 3 - Referencing a CSS Class to Form Elements in an Object Dot Style