Here's a link to my jsfiddle.
http://jsfiddle.net/inthenameofmusik/ddto077m/5/
The gradient restarts over and over in every box or element it seems. I'm not sure what's wrong with my CSS. Any help appreciated.
body {
background: linear-gradient(#1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* W3C */
}
I'm sure this is a simple fix, sorry for the CSS beginner-ness of this question.
You need to add html, body {height:100%;} to your style to force the browser to render the html parent tag at full height. Currently it's rendering only about 100px tall and the body background is repeating.
See this update fiddle for example.
Related
I want to create some flat-UI-like blocks but I need a little help. I got through some guides with linear-gradient(to left, rgba(255,255,255,0) ,rgba(255,255,255,1)); and so on, but I have't found what I actually need.
Is there any way, how to do any layer with linear opacity? I have quite huge database of images, (so I definitely can't photoshop them to have opacity by itself), and I am loading it into many "div" as a background-image. But I need to make the divs to start beeing transparent in about 75% of its width.
Is it somehow possible in CSS?
There is what I need to achieve:
You can set a linear gradient background with an extra stop to make an element transparent for 75% of its width, then linearly increase opacity.
For example:
background: linear-gradient(
to right,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 75%,
rgba(0,0,0,0) 100%
);
This makes an element have an opaque black (the three first rbga values) background for 75% of its width, then linearly transition to transparent in its rightmost 25%.
I'm afraid something like that is not possible using CSS. Since you have many images, and provided you don't show too many of them at once, you can consider using canvas to render the opacity to each image:
http://jsfiddle.net/u256zkha/
Using linear-gradient, partly from Jon's answer.
#parent{
position:relative;
width:fit-content;
}
#layer{
position:absolute;
width:100%;
height:100%;
background: linear-gradient(
to right,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 100%
);
}
<div id="parent">
<div id="layer"></div>
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=356&d=identicon&r=PG&f=1"/>
</div>
I found an opposite result in Firefox and Chrome when rendering a gradient background with offset set.
Here my css code:
html
{
background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%);
background-position: center top 30px;
}
body
{
background:linear-gradient(to bottom, rgba(255,255,255,0) 92%,rgba(245,245,245,1) 100%);
background-position: center bottom 100px;
}
The idea is to apply a sort of "Sliding doors" of background applying 2 opposite gradient onto html and body elements.
The problem rises when I set the bottom offset in Body tag: Firefox translates up with positive values, while Chrome translate up with negative values (or bottom with positive). So two major browsers have opposite behaviour.
How to solve this?
I found solution for Chrome!
It is sufficient to add
background-repeat:no-repeat;
to BODY tag css declaration, as showed in this updated JsFiddle:
I have a java plugin that sets a menu on my left and then the resulting dynamic data on the right. When you click a menu item the corresponding data on the right scrolls to the top. The data on the right is a long list, when you click on a menu item you dont just see that one (single) result alone it just brings that one to the top of the page and the rest are below it.
So what I would like to do is set a color to the top part to draw attention that it's the result you asked for; the best thing for me would be to have it recognize what you clicked and set a background color but I don't know how to do that, or write java so if I could get any help would be nice.
The div is what moves, so I set a color to a top percentage of the page with the linear-gradient in CSS3 but it moves away when you click another menu item, since the div shifts up. I have a CSS3 animation but, because IE unfortunately still exists, I need something for browser-compatibility and for older browsers. The only things I've found are CSS3 gradients which I dont want: I do not need a gradient, I need a block of color without making another div because, like I said, the data is dynamic and it's not always the same thing in that div.
The gradient is nice, because I can set a percentage which is what im looking for but it has a fade, which I don't want, and if there is a solution that isn't CSS3 I would like that. Even if there's a way to do this in CSS3 please let me know as long as it's not going to do a gradient fade. Otherwise if anyone has any nifty ideas on how else to call attention to that one section I'm open to all ideas.
Gradients DO NOT necessarily have a fade, that is a misconception, let's say that you want your div to be 70% red (solid) starting from the top, your CSS will be.
background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)
Two Methods:
With Gradients:
div{
width:200px;
height:200px;
margin:50px auto;
border:4px solid rgb(50,50,50);
background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
background-image: -webkit-linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)
}
Fiddle -> http://jsfiddle.net/QjqYt/
Without Gradients
div{
position:relative;
z-index:1;
width:200px;
height:200px;
margin:50px auto;
border:4px solid rgb(50,50,50);
}
div:before{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:70%;
content:"";
background-color:red;
}
Fiddle -> http://jsfiddle.net/6cKZL/1/
As an update to the accepted answer:
.only-start{
background: linear-gradient(
to right,
red,
red 1rem,
transparent 1rem,
transparent 100%
);
}
Rodney - You can use Colorzilla to make your own custom gradient. You can make any kind of gradient with the online tool and it gives you the CSS code. It also has an option to make it IE compatible.
Note: If someone deems this 'comment-ish' - I can move it.
You can use gradient with color percentage.
#gradbox {
height: 200px;
background-color: green; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, rgba(0,0,0,0) 20%, orange 20%); /* Standard syntax (must be last) */
}
<div id="gradbox"></div>
Code:
body { background-attachment: fixed !important; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#000000,endColorStr=#3d3c3c); }
Gradient does not stay fixed in IE8 but scrolls into a plain white background. Gradients stay fixed in Firefox and Chrome and scroll with the page.
Is there any way to have it fixed in IE8 as well? I wasn't even aware this was an issue (can't find anything according to Google).
Edit: I created a test page with the code above (and quite a bit of Lorem Ipsum) and the background was fixed like it should be. So it must be something in my layout.
It looks like all you're missing is to set a height on the body. Adding this style works for me in IE 8:
html, body {height: 100%}
So, using your style from your fiddle, it would look like this:
html, body {height: 100%}
body {
background-attachment: fixed !important;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
}
And this is what the cross-browser version would look like:
html, body {height: 100%}
body {
background-attachment: fixed !important;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
background-image: -moz-linear-gradient(center top -90deg, #000000, #ffffff);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ffffff));
}
Obviously, you could put the IE specific code elsewhere and load it conditionally, etc.
This tested fine in IE 8, Firefox 3.6, Chrome 9 & Safari 5 (Webkit) but does not work in Opera. For Opera, SVG or actual background image?
When I use gradients, with little content, the gradient repeats, how can I prevent that?
http://jsfiddle.net/mcqpP/1/
I can try using html { height: 100%; }, but when my content requires scrolling ... the gradient repeats
http://jsfiddle.net/mcqpP/3/
How can I fix this
You need to set percentages on the CSS gradients, not absolute pixels. And as long as you only care about modern browsers (i.e. you don't care about IE6) then I suggest you stay away from images, the CSS works fine.
I'm pulling my answer from the answer to this question that I wish I could upvote 100 times:
How to get a vertical gradient background to work in all browsers? That accepted answer has everything you need with full cross browser compatibility.
Here's where I took your example and made it work: http://jsfiddle.net/HJvpf/1/
body {
background: -moz-linear-gradient(top, red 0%, blue 100%);
background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue));
}
Oh and in your 2nd jsFiddle link, the reason it was repeating the gradient is because you set height 100% on html but the gradient was on body. You move that height: 100%; to the body and it works fairly well, but as you can see in my solution you don't need to specify height at all.
Edit: So you don't want it to repeat, but you also don't want it to take up the entire height. Just set repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp
body {
background: -moz-linear-gradient(top, red, blue) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
To have the bottom gradient color fill the rest of the space:
body {
background: blue -moz-linear-gradient(top, red, blue) repeat-x;
background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
Why not render your gradient out as an 1px-wide image and use something like the following:
body {
background-color: #fff;
background-image: url("images/background.jpg");
background-position: center top;
background-repeat: repeat-x;
}
Setting the background-repeat value will help you control how the background... repeats. In this case it would be rendered as a solid band across the top.
http://www.w3schools.com/css/pr_background-repeat.asp
Also, using an image should work across all browsers, whereas the moz-gradients could be problematic. The image method above should render very predictable results across all browsers.
I had the same problem but realised that it made sense and so just accepted the scrolling / repeating gradient. You could set a fixed height, not %, but to ensure that the gradient didn't repeat you would need to set the height as bigger than anybody's screen who wants to view it. And you don't know what resolutions people have. My advice is to just leave it.