I am trying to apply a soft light blend mode of an image against a linear gradient but the effect is not loading on chrome. My code is:
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url('../img/mall.png'), -moz-linear-gradient(90deg, #f857a6 0%, #ff5858 100%);
background-image: url('../img/mall.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff5858), color-stop(100%, #f857a6));
background-image: url('../img/mall.png'), -webkit-linear-gradient(90deg, #f857a6 0%, #ff5858 100%);
background-image: url('../img/mall.png'), -o-linear-gradient(90deg, #f857a6 0%, #ff5858 100%);
background-image: url('../img/mall.png'), -ms-linear-gradient(90deg, #f857a6 0%, #ff5858 100%);
background-image: url('../img/mall.png'), linear-gradient(0deg, #f857a6 0%, #ff5858 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5858', endColorstr='#f857a6',GradientType=0 );
background-blend-mode: soft-light;
It's working ok for me :
div {
width: 600px;
height: 400px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://placekitten.com/1000/800'), linear-gradient(0deg, #f857a6 0%, #ff5858 100%);
background-blend-mode: soft-light;
}
<div></div>
Related
I'd like to have a linear gradient for my entire website using HTML/CSS - starting from one color (say red) at the beginning to another (say blue) at the end. When users request the page, they first see a blue background turning gradually to a red background as they scroll down. The website should be separated by sections, each of them filling the entire screen.
The problem is that when I separate the website with sections using 100vh, the linear gradient repeats itself for each section - instead of linearly changing over the sections.
Here is the code I have used so far:
* {
margin: 0;
padding: 0;
}
body {
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
section {
height: 100vh;
}
<section>
<div class="">first section</div>
</section>
<section>
<div class="">second section</div>
</section>
Any ideas on how to extend the linear gradient background over the sections?
Any help is appreciated!
This probably isn't exactly what you are after, but you might be able to achieve what you want by adjusting the gradient percentages. I have added different gradients to each section and set the background-attachment to static.
If you are after a different effect you may have to use Javascipt/jQuery.
* {
margin: 0;
padding: 0;
}
body > section:nth-child(1) {
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
}
body > section:nth-child(2) {
background-image: -ms-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -moz-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -o-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #202020), color-stop(1, #ffffff));
background-image: -webkit-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: linear-gradient(to top, #39a7cc 30%, #ffffff 100%);
}
section {
height: 100vh;
background-repeat: no-repeat;
background-attachment: static;
}
<section>
<div class="">first section</div>
</section>
<section>
<div class="">second section</div>
</section>
Here is my css (for this gradient the code was copied from colorzilla). Nothing too special. If i remove all the gradient parts and stay with a solid color, the colored stripe renders in IE8 just fine. But the gradient is not displaying (in chrome everything looks correct). How to fix this? Thnks.
.hdr:after {
content: " ";
display: block;
position: absolute;
min-width: 960px;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: #e7eff3;
background: -moz-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e7eff3), color-stop(50%, #1d667a), color-stop(100%, #e7eff3));
background: -webkit-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -o-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -ms-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: linear-gradient(to right, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e7eff3', endColorstr='#e7eff3', GradientType=1);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7eff3', endColorstr='#e7eff3',GradientType=1 )';
}
I am writing a website as part of my college course, but I have came across a problem. I can't seem to fit whole screen.
Please visit here to see what I mean: http://jsfiddle.net/xiiJaMiiE/gM3yk/
html, body
{
background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF),
color-stop(1, #59C5FF));
background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
background-repeat:no-repeat;
background-size:cover;
background-
}
Thanks in advance
You need to set the height of html/body to 100%;
height: 100%;
http://jsfiddle.net/gM3yk/1/
Give parent height and width, and a suggested way is, to use background-size:100% 100%; rather than background-size:cover;
html, body {
background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF), color-stop(1, #59C5FF));
height: 100%; /* added */
width: 100%; /* added */
background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
background-repeat:no-repeat;
background-size:100% 100%; /* updated*/
}
Simply add
width: 100%;
height: 100%;
I'm generating a bar of horizontal gradient as a background across my site that works perfectly in every browser except...IE9.
The gradient itself is working, it is just that I want to limit the height of the blue bar. Check it out in Safari/Firefox/Chrome and then in IE9 and you can see that the blue gradient fills the entire element.
Horizontal gradient bar using CSS
Here is my CSS:
#inner {
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(35%,#0057be));
background: -webkit-linear-gradient(top, #1e5799 0%,#0057be 35%);
background: -o-linear-gradient(top, #1e5799 0%,#0057be 35%);
background: -ms-linear-gradient(top, #1e5799 0%,#0057be 35%);
background: linear-gradient(to bottom, #1e5799 0%,#0057be 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
background-size: 1px 10%;
background-repeat: repeat-x;
margin: 0 auto;
padding: 1em 0;
}
This code should work on IE9:
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWU1Nzk5Ii8+PHN0b3Agb2Zmc2V0PSIwLjM1IiBzdG9wLWNvbG9yPSIjMDA1N2JlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
I made it with Visual CSS Gradient Generator
Updated CSS:
#inner {
background: #1e5799;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWU1Nzk5Ii8+PHN0b3Agb2Zmc2V0PSIwLjM1IiBzdG9wLWNvbG9yPSIjMDA1N2JlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #1e5799), color-stop(35%, #0057be));
background: -webkit-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -moz-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -ms-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -o-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: linear-gradient(to bottom, #1e5799 0%, #0057be 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
background-size: 1px 10%;
background-repeat: repeat-x;
margin: 0 auto;
padding: 1em 0;
}
IE9 doesn't support CSS3 gradients, but it supports inline SVG. I don't recommend to mix up filter and SVG backgrounds on IE9, i think the best approach is to use conditional comments as explained in this article by Paul Irish.
I've stumbled upon something weird. When applying a dashed white border to an element, the colors of the background gradient appear on the wrong side of the element, like so:
I've seen this in the latest versions of Firefox, Chrome, Opera and in IE10. IE9 has my intented effect, however.
My css is currently:
aside.block {
width: 259px;
padding: 12px;
margin: 15px 0;
border: 2px dashed #fff;
background-image: -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00', endColorstr='#dbcb00');
}
The border colors on the left and right side color fine, but since this happens in pretty much every browser, I'll have to assume this is my mistake, not a browser bug. What am I missing here?
You can fix this by setting background-origin to border-box.
http://jsfiddle.net/LVfqe/11/
.block{
width: 259px;
padding: 12px;
background-image: -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00',endColorstr='#dbcb00');
border: 2px dashed #fff;
background-origin:border-box;
}