Is it possible to have those backgrounds work together?
background: url("../images/search.png") no-repeat scroll 9px 4px transparent;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #fdca14), color-stop(1, #ff8d02) );
background:-moz-linear-gradient( center top, #fdca14 0%, #ff8d02 100% );
Thanks :)
You may also want to check out CSS3 Pie if you need to be able to do this in older IE browsers.
CSS3 allows it. Here's an example of multiple background images being used in the same background:
.exampleClass {
background-image: url(images/example1.png), url(images/example2.png);
background-repeat: repeat-x, repeat;
}
It's supported in all major browsers (except for IE8 and before sadly)
CSS
.class{
background: url("../images/search.png") no-repeat scroll 9px 4px transparent,-webkit-gradient( linear, left top, left bottom, color-stop(0, #fdca14), color-stop(1, #ff8d02) ),-moz-linear-gradient( center top, #fdca14 0%, #ff8d02 100% );
}
Related
I have a background image, and I want the linear gradient to be on both the top and bottom. I thought the CSS I had was supposed to work, but I can only get the top gradient to work. There is a div below the features div, and I'm wondering if that is messing something up? I am bashing my head right now :D
.features{
height: 300px;
background: linear-gradient(top, #fff, transparent);
background: linear-gradient(to bottom, transparent, #fff);
background-image: url('assets/Background_Features.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div class="container-fluid p-x-0 features text-xs-center">
</div>
<div class="container-fluid p-x-0 p-b-3 m-t-3 pricing text-xs-center">
</div>
Link: http://jakeford.io/pwi-test/home.html
You should combine multiple gradient stops with multiple backgrounds definition passed with coma delimiter rather than overwriting one background-image rule with another. Here is a codepen for your use case:
http://codepen.io/MakiBM/pen/NRaWrr
.bg {
...
background-image:
linear-gradient(to bottom, white, transparent 40%, transparent 60%, white),
url('https://a2ua.com/mountains/mountains-007.jpg');
background-size: cover;
background-position: center;
}
And some resources about both both technics:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
http://www.css3.info/preview/multiple-backgrounds/
Thanks guys, you were right Bartek, I was giving the gradient to the background of the div, instead of the actual background-image. Too many background rules.
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.000000001), rgba(255, 255, 255, .99)),
url('assets/Background_Features.jpg');
Worked for me.
I use this to generate gradient colors in CSS, try first the use without any webkit.
Is it possible to fade the text horizontally near the end of the div using the CSS.
For example like this:
CSS gradients and rgba will do the job for this
Demo
Extended Text Version (Updated)
div {
position: relative;
display: inline-block;
}
div span {
display: block;
position: absolute;
height: 80px;
width: 200px;
right: 0;
background: linear-gradient(to right, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
top: 0;
}
Note: I've stripped off cross-browser CSS gradient code, you can get
it from http://www.colorzilla.com/gradient-editor/
About the rgba() it's introduced recently in CSS3 spec, where I hope you know what RGB stands for and a stands for alpha, so instead of using HEX I am using RGBA and am just playing with the alpha part here
Skipping IE9-, which may require an image or SVG, you can add a position: absolute div that covers the full width and has a partially-transparent gradient that fades to white. This div must be contained by the element you want to cover, which must be position: relative.
http://jsfiddle.net/JcPAT/
Not really cross browser friendly but you can use something like:
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);
I am making a naviagtion bar with a gradient as follows:
/* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b49931), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f; /* Fallback */
it works great in safari but does not work firefox. I know making an image would be better but is there any easy way that it will work in firefox aswell as safari?
I have made a JSFiddle http://jsfiddle.net/BVbfQ/
You can use Safari to make a screenshot of the result and crop it to make a repeatable image.
Use this tool. Works in all browsers
http://www.colorzilla.com/gradient-editor/
i am using this in my body code
body {
margin:50px;
text-align:center;
padding: 0px;
background: #2a6da9;
background: -moz-linear-gradient(top, #1D1D1D, #1F1F1F);
background: -webkit-gradient(linear, left top, left bottom, from(#1D1D1D), to(#1F1F1F));
}
in the background, the gradient displays in blocks that look rough and pixelated. How do i fix this to where it is smooth. I also have tried making an image the background, but had no luck. Thanks
It is browser dependent and I do not see it on mine with the same css. You could try changing it to:
background: -moz-linear-gradient(top, #1d1d1d 0%, #1f1f1f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d1d1d), color-stop(100%,#1f1f1f));
But it is such a slight change in color, I even set the height to over 300px.
Using a 1 X 100 pixel image made the quality look much better
I have a which I am going to make into a button. The top half should be #ffd41a and the bottom half should be #fac915. Here is a link to the button at present. http://jsfiddle.net/WnwNW/
The problem that I'm facing is how should I deal with two background colors. Is there a way to do what I'm trying to do without the need for addition divs or spans? Can I have two background attributes within the same CSS class?
CSS3 provides a way to do this
background-image: linear-gradient(to bottom, #FFD51A 50%, #FAC815 50%);
background-image: -o-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -moz-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -webkit-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -ms-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
http://jsfiddle.net/WnwNW/1/
Yes and no. You can use two background attributes. However, this is only supported in CSS3. That means that two background images will break in older browsers. That being said, you can do something like this.
background-image: url(color1.png), url(color2.png);
background-position: bottom, top;
background-repeat: no-repeat;
I'm not sure if you can specify multiple background "colors."