I have a page with multiple backgrounds: one with gradient and one with texture pattern. But background-blend-mode doesn't work. Chrome appears to show only gradient layer. When I try to blend two background-images or background-image with solid background-color it works well. But not with gradient. Is something wrong?
body {
width: 100%;
height: 100%;
background: url('../images/noisy.png');
background-color: rgba(29, 84, 140, 1);
background: -webkit-radial-gradient(center, ellipse cover, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
background: radial-gradient(ellipse at center, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
background-blend-mode: multiply;}
And my goal is something like that:
It does work with gradients you just need to use multiple backgrounds.
The problem with your current code is that you are only setting one background.
First you set background to an image:
background: url('../images/noisy.png');
Then you override the image and set background to a gradient:
background: radial-gradient(ellipse at center, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
To assign multiple backgrounds you need to comma seperate them:
background: background1, background2, ..., backgroundN;
Using your gradient:
body {
width: 100%;
height: 100%;
background: url('http://i.stack.imgur.com/PEnJm.png');
background-color: rgba(29, 84, 140, 1);
/* ^ fallbacks for crappy IE ^ */
background: url('http://i.stack.imgur.com/PEnJm.png'), -webkit-radial-gradient(center, ellipse cover, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
background: url('http://i.stack.imgur.com/PEnJm.png'), radial-gradient(ellipse at center, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
background-blend-mode: multiply;
}
A gradient similar to your image example:
body {
width: 100%;
height: 100%;
background: url('http://i.stack.imgur.com/PEnJm.png'), -moz-linear-gradient(left, rgba(21,112,145,1) 0%, rgba(36,138,166,1) 100%);
background: url('http://i.stack.imgur.com/PEnJm.png'), -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(21,112,145,1)), color-stop(100%,rgba(36,138,166,1)));
background: url('http://i.stack.imgur.com/PEnJm.png'), -webkit-linear-gradient(left, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
background: url('http://i.stack.imgur.com/PEnJm.png'), -o-linear-gradient(left, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
background: url('http://i.stack.imgur.com/PEnJm.png'), -ms-linear-gradient(left, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
background: url('http://i.stack.imgur.com/PEnJm.png'), linear-gradient(to right, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
background-blend-mode: multiply;
}
Related
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 want to style background of one element in CSS, something like this:
color gradient from top to bottom with no any transparency,
transparency gradient with single color from left to right: left and right with no transparency, and middle with 100% transparency
Second gradient should be on higher layer than first. Both placed on 100% of element's area
Code:
div.panel div.panel-heading
{
background: linear-gradient(to bottom, #e8e8e8 0%,#dbdbdb 50%,#cdcdcd 51%,#e0e0e0 100%),
/* Here I want have got second gradient, with transparency, on higher layer */;
}
Is this possible to do?
It is possible with :after and :before :
.gradient{
height:400px;
background: #61fc32;
background: -moz-linear-gradient(left, #61fc32 0%, #f43034 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#61fc32), color-stop(100%,#f43034));
background: -webkit-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: -o-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: -ms-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: linear-gradient(to right, #61fc32 0%,#f43034 100%);
position:relative;
}
.gradient:after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: -moz-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%, rgba(40,51,201,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(40,51,201,0)), color-stop(100%,rgba(40,51,201,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: radial-gradient(ellipse at center, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
}
DEMO
Im creating a website for college and Im not sure how to stop text from overlapping when I make the web browser smaller. This is what I mean:
(not overlapping)
(overlapping)
Here is my jsfiddle: (http://jsfiddle.net/RC4Ar/)
.words {
font-family:apple;
font-size:20px;
max-width:800px;
height:190px;
margin-top:10px;
margin-left:42%;
}
Thanks in advance!
Assuming you are adding the words class to the paragraph tags (without your html, we can only guess), you simply need to remove the height declaration.
.words {
font-family: apple;
font-size: 20px;
max-width: 800px;
margin-top: 10px;
margin-left: 42%; }
For your fiddle example, I would change the title_bar to have a min height instead of a fixed height. This will allow it to be responsive instead of overlapping over the following text.
#title_bar {
margin-top:78px;
left:-17px;
width:101.5%;
min-height:30px;
background:blue;
position:relative;
top:-70px;
z-index:3;
border: 3px rgba(255, 105, 180, 1) solid;
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%);
}
Fiddle
I generated gradient background in colorzilla and i put inside css file as u can see in this code and it keeps repeating me the background. I want this background to be from where it starts to the end of page.
body{
background: #1d6fa4;
background: -moz-linear-gradient(-45deg, #1d6fa4 1%, #499bc8 26%, #51abc9 52%, #3e94c1 74%, #277cad 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#1d6fa4), color-stop(26%,#499bc8), color-stop(52%,#51abc9), color-stop(74%,#3e94c1), color-stop(100%,#277cad));
background: -webkit-linear-gradient(-45deg, #1d6fa4 1%,#499bc8 26%,#51abc9 52%,#3e94c1 74%,#277cad 100%);
background: -o-linear-gradient(-45deg, #1d6fa4 1%,#499bc8 26%,#51abc9 52%,#3e94c1 74%,#277cad 100%);
background: -ms-linear-gradient(-45deg, #1d6fa4 1%,#499bc8 26%,#51abc9 52%,#3e94c1 74%,#277cad 100%);
background: linear-gradient(135deg, #1d6fa4 1%,#499bc8 26%,#51abc9 52%,#3e94c1 74%,#277cad 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d6fa4', endColorstr='#277cad',GradientType=1 );
}
You need this
html, body {
height: 100%;
}
body {
background-position: fixed;
/* Gradient dump goes here */
}
I have to accomplish following image by using CSS:
It's one image which will contain the main-navigation. So I wrote some CSS in order to do so (not the correct color-codes, I know):
#menu-block {
background: #730868;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#730868), to(#0a9f9d));
background: -webkit-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: -moz-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: -ms-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: -o-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
-pie-background: linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
behavior: url(/pie/PIE.htc);
}
And this code works great! It does what it has to do except for the arrow on the end... I honestly have no idea on how to tacle this issue.
Should I create a second div in the shape of an arrow and guess the closest color?
It should support IE8...
This gets you close
It actually ends up with a solid colored "point" (equal to the end color of the gradient). It might be possible to actually get a continuation of the gradient into the triangle if it absolutely needs to (I don't have time at present to figure that out).
Here's the example (note: the example uses code generated from colorzilla for IE9 support). You need to have a fixed width for this to work (to set the left/right border of the psuedo-element), but the height can be flexible. In my example, IE8 loses the red center. Perhaps with your PIE solution, it does not.
HTML (with IE9 condition as the example has)
<!--[if gte IE 9]>
<style type="text/css">
#menu-block {
filter: none;
}
</style>
<![endif]-->
<div id="menu-block" ></div>
CSS
#menu-block {
width: 100px;
position: relative;
background: rgb(0,0,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,255,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,255,1)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,255,0,1)));
background: -webkit-linear-gradient(top, rgba(0,0,255,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,255,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,255,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,255,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#ffff00',GradientType=0 );
}
#menu-block:after {
content: '';
width: 0;
height: 0;
position: absolute;
left: 0;
top: 100%;
border-right: 50px transparent solid;
border-left: 50px transparent solid;
border-bottom: 0 transparent solid;
border-top: 30px #ffff00 solid;
}
Why not create the full rectangle and then position and overlay triangle images at the bottom that blend with your background to give the look of a down-pointing arrow?