I have the following CSS code.
body{
height: 100%;
min-height: 100%;
max-height: 100%;
background-color: #1468b3;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1468b3));
background-image: -webkit-linear-gradient(top, #2F2727, #1468b3);
background-image: -moz-linear-gradient(top, #2F2727, #1468b3);
background-image: -ms-linear-gradient(top, #2F2727, #1468b3);
background-image: -o-linear-gradient(top, #2F2727, #1468b3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2F2727", endColorstr="#1468b3");
}
Regardless of the content of the page there should be a nice gradient that stretches from the top to the bottom of the browser window. This screenshot illustrates the issue:
I'm not quite sure why this is happening.
Adding
no-repeat;
Cancels out the gradient and instead the background is the solid #1468b3
Try adding html { height: 100%; }
Related
According to this answer, this should work:
#shop {
background-image: url('../images/tilecovers/shop.jpg'),
linear-gradient(
135deg,
rgba(228,245,252,0.18) 0%,
rgba(191,232,249,0.2) 49%,
rgba(191,232,249,0.21) 65%,
rgba(159,216,239,0.21) 73%,
rgba(82,189,236,0.22) 100%);
}
It doesn't work though, only the image is visible.
After a few refreshes, I noticed the gradient is loading first, then the image on top of it. How can I make the translucent gradient on top of the background image?
Not sure about cross browser support but one option is using the background-blend-mode property like so:
.shop {
background-image: url('https://placeholdit.co//i/500x250?bg=111111'),
linear-gradient(
135deg,
rgba(228,245,252,0.18) 0%,
rgba(191,232,249,0.2) 49%,
rgba(191,232,249,0.21) 65%,
rgba(159,216,239,0.21) 73%,
rgba(82,189,236,0.22) 100%);
background-blend-mode: overlay;
width: 500px;
height: 250px;
}
.shop-no-gradient {
background-image: url('https://placeholdit.co//i/500x250?bg=111111');
width: 500px;
height: 250px;
}
<div class="shop"></div>
<br>
<div class="shop-no-gradient"></div>
Use :before to apply the filter.
Like so:
#shop {
width: 350px;
height: 150px;
background: url("http://via.placeholder.com/350x150") center center no-repeat;
}
#shop:before {
width: 350px;
height: 150px;
content: '';
position: absolute;
background-image: linear-gradient(
135deg,
rgba(228,245,252,0.18) 0%,
rgba(191,232,249,0.2) 49%,
rgba(191,232,249,0.21) 65%,
rgba(159,216,239,0.21) 73%,
rgba(82,189,236,0.22) 100%
);
}
<div id="shop">
</div>
I am trying to make this gradient appear on entire body of document, but instead it just shows only on the top. Is there anyway to fill it up entire body? I am using firefox if that makes difference.
body {
height: 100%;
background-image: linear-gradient(to top, blue 80%, green 0);
}
You need to define a 100% height for the html and body tags:
html,
body {
height:100%;
}
body {
background:#BAF7C8;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #BAF7C8),
color-stop(1, #5C93DB)
);
background-image: -o-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
background-image: -moz-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
background-image: -webkit-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
background-image: -ms-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
background-image: linear-gradient(to top, #BAF7C8 0%, #5C93DB 100%);
}
(gradient generated from css3factory).
Notice there is a regular background colour fallback as well.
You could generate the gradients automatically with autoprefixer.
JSFiddle
Here is the proper code to make sure you get your linear gradient.
html {
width: 100%;
height: 100%;
}
body {
background-image: linear-gradient(0deg ,white, orange);
}
This method works in almost all modern browsers. Hope this helped.
I've been trying to create a radial background, except for some reason all I can get is a line. I have no idea what I'm doing wrong, any ideas?
Jsfiddle: http://jsfiddle.net/3QSFj/1/
CSS:
background: -webkit-gradient(radial, circle, 0, circle, 70, color-stop(0%, #718aa7), color-stop(70%, #203044));
background: -webkit-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -moz-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -o-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: radial-gradient(circle, #718aa7 0%, #203044 70%);
Set your body height to 100%, your body element is empty, and thus it doesn't have any height, the background is simply repeated there.. Bad Demo
html, body {
height: 100%;
}
Demo
Also, you background will be repeated, so you will need background-attachment: fixed; as well as background-repeat: no-repeat
Demo 2
first time asking, please go easy on me
I'm trying to make a background gradient for a web app that uses JQuery Mobile. I'm clueless about CSS and UI design in general.
I want the gradient to fill the entire page's space. Right now, it fills up to the original window's size, but "cuts off" when scrolling down.
Most suggestions point to this:
html
{
height: 100%;
}
...which doesn't work for me. Here is what I have:
content: " ";
width: 100%;
height: 100%;
float: left;
position: relative;
z-index: -1;
top: 0;
left: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0.5) 100%) fixed;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0.5))) fixed;
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%)fixed;
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed; background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
background: linear-gradient(135deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
This problem happens sometimes when you use height:100%;. Since it means to fill 100% of the browser window, it doesn't fill the rest because that would be past 100%.
Try tweaking it a little and writing it like this:
html
{
min-height: 100%;
}
Now it can fill past 100% so it should fill the rest of the background.
I am making a background in the body element but when I make a background it uses the window height (only the visible height) and if the user scrolls the page down the background repeats it self. If I use no-repeat the rest of the page is in solid color.
I have used background-size: 100% 100%; but still not working.
I only want a background that goes from #ccc to #000 and fills the entire page without repeating itself.....
Can anyone be so kind and help me? Thanks in advanced!
EDIT:
My code is:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#000000',GradientType=0 );
}
LAST EDIT:
body {
background: #000;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
}
note: The best solution I found. When I scroll the window you can see the background color because the background-image does not repeat and as the background-image ends with the same background color everything is ok!
Unfortunately, you cannot stretch out background images, so what you are seeing is actually what you're supposed to see. Normally when sites use gradients as background images, they make it so the top of the gradient is flush with the top of the screen by setting background-position: 0 0, the gradient repeats itself horizontally by setting background-repeat: no-repeat, and then they set the background-color of the site to be the same color as the bottom of the gradient.
There are ways using CSS3 and filters in which you can create gradients for users, but there is a limited amount of browser-compatibility for these features. Here is a fiddle containing a gradient: http://jsfiddle.net/Wexcode/qhMx9/. See this article for more information about those features.