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.
Related
When I use a linear-gradient on an image it shows a bunch of lines that are going across the screen as it fades to the bottom.
gradient clipping lines picture
I've tried looking this up and saw that the height shouldn't be 100% but when I changed it to what the person said it didn't change anything.
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(11, 11, 11, 0)));
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(11, 11, 11,0));
This is the gradient I'm using
Hope I have this right in what you want. You can add a gradient background by adding a background-image:
background-image:linear-gradient (#520c52d9,
#00000050);
background-repeat: no-repeat;
background-size: contain;
// Or it could be
background-size: cover;
// OR
background-size: 100%;
There is much more you can do with this and I don't mind helping. Just let me know I do this a good amount. You can even put this on the text by making the Text Transparent (a bit of a jimmy rig like)
I am trying to "blend" an image with a background-color using CSS, so I tried:
.bg-img {
object-fit: cover;
object-position: center center;
width: 100%;
height: auto;
max-height: 90vh;
opacity: 0.3;
mask-image: linear-gradient(to top, transparent 2%, #0f0f0f 80%);
-webkit-mask-image: linear-gradient(to top, transparent 2%, #0f0f0f 80%);
}
<img class="bg-img" src="https://i.imgur.com/y7jfKaw.jpg">
And this basically worked, however the image doesn't look quite blended in with the background. It just looks like many "shade lines", like on the image below
And what I want is the bottom of the image to be blended better, something like the image below
Hope this makes sense and thx to anyone that helps in advance.
I have been trying to apply linear gradient to the background, but there are stripes that appear in the middle I'm not getting a smooth gradient, how to get a smooth gradient from top to bottom
MY CSS
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #DADADA;
background-repeat: no-repeat;
background: -webkit-linear-gradient(white, #DADADA);
background: -moz-linear-gradient(white, #DADADA);
background: -ms-linear-gradient(white, #DADADA);
background: -o-linear-gradient(white, #DADADA);
My Fiddle : https://jsfiddle.net/3njyc0xm/
Yes, I think there is a problem with "your" colors. I have tried your code with other colors, and there is no problem.
I have tried your jsfiddle gradient in Firefox and Edge, and it seems that there is no problem with your colors, so maybe there is a Chrome bug, or something.
In Firefox your example works fine, but I think the "normal" CSS property is needed for some browsers. Just add it with
background: linear-gradient(white, #DADADA);
I edited your fiddle here
I have the following code my background so that the image is slightly opaque.
div#home {
background-size: cover;
color: #404040;
background-image: linear-gradient(to bottom, rgba(0,0,0, 0.45) 0%,rgba(0,0,0, 0.45) 100%), url(/images/sp-bg.jpg);
}
However I want it to be fixed. I tried using background-attachment but that doesn't work on iOS Safari so i was looking for alternatives and come across:
background: url(/img.png) no-repeat center center fixed
I am trying to implement that so it works with my opacity bit like:
div#home {
background-size: cover;
color: #404040;
background: linear-gradient(to bottom, rgba(0,0,0, 0.45) 0%,rgba(0,0,0, 0.45) 100%), url(/images/sp-bg.jpg) no-repeat center center fixed;
}
However that zooms my image in a lot more than it should be.
The site is accessible at: http://www.shivampaw.com/
Thanks
Note, it is best to set background-size after background-image.
You have also to reset it when background-image is reset or updated elsewhere (via a class or id )
From your question, I was not too sure i understand your issue, but if with the gradient you had an issue and not without it, you may use an inset shadow instead :
html {
height:100%;
background:url(http://www.shivampaw.com/images/sp-bg.jpg) center center fixed;
background-size:cover;
/*box-shadow:inset 0 0 0 3000px rgba(0,0,0,0.225);*/
box-shadow:inset 50vh 100vw rgba(0,0,0,0.45);
}
body {/* make html scroll */
height:200%;
}
or set background-size for both bg :
html {
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%) 0 0 scroll no-repeat, url(http://www.shivampaw.com/images/sp-bg.jpg) center center fixed;
background-size:cover, cover;
}
body {
/* make html scroll */
height: 200%;
}
Just add background-size: cover; at the end(after the background is set) and your code should work fine.
By default you have background-size:initial. The initial keyword is used to set a CSS property to its default value.
cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image.
A friend of mine has set up a little landing page and is asking me about an issue on mobile (Chrome). The background image (on the body) is set to cover
body {
background-image: linear-gradient(135deg, rgba(14, 113, 184, 0.8) 0%, rgba(28, 22, 53, 0.6) 100%), url("../img/bgvid.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
The background image will render within the full viewport, but if I scroll down, it is kind of cut of, check the images down below to see what I mean (the gray block). He is asking for my help but I really don't know what could be causing this. I tried to remove the footer (and set the body height to 100%), but it did not change anything.
Solved
Fix: Looks like fixed background do not work on mobile browsers. This fixed it:
background-attachment: scroll;
CSS background image to fit width, height should auto-scale in proportion
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}