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>
Related
Essentially, I want to create an element that combines a "to right" gradient with a color stop at a certain percentage and another color stop for the remaining width with a "to bottom" gradient that fades both colors to transparent. Getting the color stop part is easy, getting the fade is easy; I just can't figure out how to get both.
/*I can get this:*/
div {
width: 500px;
height: 100px;
}
.color-change {
background: linear-gradient(to right, rgb(255, 175,157) 80%, rgb(255, 95, 89) 80%);
}
/*or this:*/
.fade {
background:linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
/* but not both*/
<div class="color-change"></div>
<div class="fade"></div>
This probably isn't hard but I can't find any examples that do exactly this. I could just use a png., but it seems as though this ought to be doable in CSS. Thanks for any suggestions (or better, solutions).
Use CSS ::before (:before)
In CSS, ::before creates a pseudo-element that is the first child of
the selected element. It is often used to add cosmetic content to an
element with the content property. It is inline by default. https://developer.mozilla.org
div {
width: 500px;
height: 100px;
}
.fade {
background: linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
position: relative;
}
.fade::before {
display: inline-block;
content: "";
height: 100%;
width: 20%;
background: black;
position: absolute;
right: 0;
background: linear-gradient(0deg, rgba(246,115,115,1) 4%, rgba(250,192,194,1) 34%, rgba(255,233,234,1) 66%, rgba(255,255,255,1) 100%);
}
<div class="fade"></div>
Multiple background layer can do it:
.color-change {
--p:80%; /* this is your percentage */
background:
linear-gradient(to bottom, transparent, #fcc1b0) left,
linear-gradient(to bottom, transparent, rgb(255, 95, 89)) right;
background-repeat:no-repeat;
background-size:var(--p) 100%,calc(100% - var(--p)) 100%;
width: 500px;
height: 100px;
margin:10px;
}
<div class="color-change"></div>
<div class="color-change" style="--p:50%"></div>
<div class="color-change" style="--p:20%"></div>
Or you can mask it with a pseudo element. This is real transparent.
body {
background: dodgerblue;
}
div {
width: 500px;
height: 100px;
}
.color-change {
-webkit-mask: linear-gradient(to bottom, transparent, #000);
mask: linear-gradient(to bottom, transparent, #000);
position: relative;
}
.color-change:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgb(255, 175, 157) 80%, rgb(255, 95, 89) 80%);
}
<div class="color-change"></div>
The following snippet perfectly works on Chrome: the background image fades into to the background behind towards the bottom.
div {
width: 200px;
height: 200px;
background-image: url("http://i.imgur.com/wcDxIZG.jpg");
background-size: cover;
background-position: center center;
-webkit-mask-image: linear-gradient(black, black, transparent);
mask-image: linear-gradient(black, black, transparent);
}
<div></div>
But it doesn't work on Firefox, the value is said to be incorrect.
Why ? And how can I fix that ?
Note that I know how to use another div as overlay, which isn't a general solution to me as it has too many consequences on content and element position. The only answers I'm interested in are the ones which fix the background of the div.
I don't know why, but you can replicate the effect by using the :after property for this, and this works for all browsers - even our old friend IE:
.container {
height: 200px;
overflow: hidden;
position: relative;
}
.image {
width: 200px;
height: 200px;
background-image: url("http://i.imgur.com/wcDxIZG.jpg");
background-size: cover;
background-position: center center;
}
.image:after {
content: '';
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FAFAFA', endColorstr='#FAFAFA');
background-image: -webkit-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%);
background-image: -ms-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%);
background-image: linear-gradient(to bottom, rgba(2248, 244, 243, 0) 0%, #fafafa 100%);
display: block;
position: absolute;
pointer-event: none;
bottom: 0;
left: 0;
width: 200px;
height: 20%;
}
<div class="container">
<div class="image"></div>
</div>
Starting from Firefox 53 (released April 19, 2017) , this is now possible as the support of masking images has been completed.
See http://caniuse.com/#search=mask
When i create background gradient like this:
background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 59%,#ededed 100%);
I get ellipse that is inside the div, and conform to shape of div. So if div is large in height then ellipse would be stretched vertically. If div is a square then ellipse would be like a circle. That's fine, i want to control height of ellipse.
The exact question can be addressed by combining the last 2 answers: circle gradient and adjusting the background size.
Something like this:
div {
width: 300px;
height: 100px;
background: radial-gradient(circle, white 0%, red 50%, black 100%);
background-size: 100% 200%;
background-position: 0% 50%;
}
<div></div>
I find it less of a hassle than nested divs, and by playing with the background-position and size values, you can get some pretty cool effects!
Use a div with overflow set to hidden, and a div inside of it absolutely positioned with a fixed height.
#outer {
height: 100px;
overflow: hidden;
position: relative;
width: 200px;
}
#inner {
background: radial-gradient(ellipse at center, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
bottom: 0;
height: 150px;
position: absolute;
width: 200px;
}
<div id="outer">
<div id="inner"></div>
</div>
You can play with the background dimensions and position:
div {
width: 300px;
height: 100px;
background: radial-gradient(ellipse at center, white 0%, red 100%);
background-size: 100% 200%;
background-position: 0% 50%;
}
demo
You can try circle instead of ellipse:
Demo on dabblet
.rect2 {
width: 600px;
height: 100px;
line-height: 100px;
text-align: center;
background: radial-gradient(circle, #ffffff 0%, #ffffff 59%, #dcdcdc 100%);
}
I've seen a million people do it, but I haven't been able to get it to work.
background: -webkit-linear-gradient(left top, black, #333333 85%, gray), url('/img/helix.png');
I've tried with the order reversed and with background-image, still nothing.
I saw one person use:
body:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
}
But there has to be a better way...
Updated code:
In an ID for the image div:
height: 100%;
width: 100%;
background: transparent url('/img/helix-white.png') no-repeat;
In the CSS for the body element:
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
background: -moz-linear-gradient(left top, black, #333333 85%, gray);
background: -ms-linear-gradient(left top, black, #333333 85%, gray);
background: -o-linear-gradient(left top, black, #333333 85%, gray);
background: linear-gradient(left top, black, #333333 85%, gray);
Update 2:
I used a div with the image in it with CSS for positioning:
<div id="backgroundImage">
<img src="img/helix-white.png" alt=" " />
</div>
#backgroundImage
{
position: fixed;
bottom: 10%;
left: 7%;
opacity:0.4;
filter:alpha(opacity=40);
-webkit-transform: rotateZ(20deg);
-moz-transform: rotateZ(20deg);
-ms-transform: rotateZ(20deg);
-o-transform: rotateZ(20deg);
transform: rotateZ(20deg);
}
And in the body CSS for the gradient:
height: 100%;
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
background: -moz-linear-gradient(left top, black, #333333 85%, gray);
background: -ms-linear-gradient(left top, black, #333333 85%, gray);
background: -o-linear-gradient(left top, black, #333333 85%, gray);
background: linear-gradient(left top, black, #333333 85%, gray);
Why not have a div with the background gradient then another div inside with a background image. If the background image is a .png with transparency or doesn't fill the div, you'll be able to see the gradient behind it.
e.g.
<div id="gradient">
<div id="image">
Your content here.
</div>
</div>
CSS
#gradient {
background: -webkit-linear-gradient(left top, black, #333333 85%, gray); }
#image {
background: transparent url('your image here') center center no-repeat; }
On another note, you should use a full range of gradient options to support all browsers (not just webkit). I'd recommend using a CSS3 gradient generator for the code:
http://www.colorzilla.com/gradient-editor/
as mentioned, be sure you're checking your stuff in either Safari or an older version of Chrome. They both use(d) webkit as the rendering engine.
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%; }