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.
Related
I have an LARGE image that needs to be a part of a site, of course this hits the performance. I got the idea to cut it up into pieces and stich the image together at load using a grid was my idea.
One tiny problem though... it has to be in the background.
Should I go the dreadful z-index way to fix this or is there a more beautiful solution? The image can be cut in any number of tiles.
Depending on the required browser support you could use multiple background images. Position them in their appropriate position in the background.
html,
body,
div {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
background-image:
url(http://via.placeholder.com/350x150?text=Image1),
url(http://via.placeholder.com/350x150?text=Image2),
url(http://via.placeholder.com/350x150?text=Image3),
url(http://via.placeholder.com/350x150?text=Image4);
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position:
top left,
top right,
bottom left,
bottom right;
background-size:
51% 50%,
50% 50%,
51% 50%,
50% 50%;
}
<div></div>
I have a background with a container that has a filter in its css that gives the lower half of the page a black & white effect.
What I want to do is have the lower half of the text do the same.Any ideas?
class App extends Component {
render() {
return (
<div className="portfoliobackground">
<NavbarInstance />
<div className='headline'>Text here</div>
<div className='profile-box container'>
</div>
</div>
);
}
}
this is the css below
body{
background: url('../images/wtc2.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.headline{
z-index: 0;
font-size: 60px;
font-family: 'Encode Sans Expanded', sans-serif;
color: #e22422;
text-align: center;
position: relative;
top: 7.5em;
}
.profile-box{
z-index: -1;
background: url('../images/wtc.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: grayscale(100%);
width: 100%;
height: 50%;
margin-top: 20%;
border-top: white solid 3px;
position: absolute;
}
Try:
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
and
clip-path: polygon(0 50%, 100% 50%, 100% 0, 0 0);
respectively on two text elements ontop of each other with different colors.
There are several methods to achieve this effect.
The first two that come to my mind are the following: both involve creating two different copies of the text (one that is colored, and the other one that is black or white). These two copies are placed one above the other using a fixed positioning and the z-index property (think of them as different layers).
OVERFLOW HIDDEN - IF YOU KNOW THE HEIGHT OF THE TEXT DIV
In this case, you wrap the colored text in two containers:
1) The first one has a fixed height (in my example, 54px).
#co_1{height:54px;}
2) The second has its height set to 50% of the parent, and its overflow is hidden (meaning that everything that goes beyond its borders is not displayed.
#co_2{height:50%;overflow:hidden;}
The black text, on the other hand, is fully displayed. Given that it is positioned behind the colored one, however, its upper half cannot be seen.
Jsfiddle
CLIP PATH - IF YOU DON'T KNOW THE HEIGHT OF THE TEXT DIV
In this case, you use the clip-path CSS property to display two halves of the text: the upper case is colored, the bottom wrap the colored text in two containers.
This is the colored text (only the top half is displayed):
#co_1{clip-path: polygon(0 50%, 100% 50%, 100% 0, 0 0);}
And this is the black or white text (only the bottom half is displayed):
#co_2{clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);}
Please note that the clip-path property may not be fully supported (see here)!
Jsfiddle
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 there a way to use linear-gradient background which is starting from the center / middle of the screen?
This is my current css:
body {
display: table;
width: 100%;
height: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-size: 800px;
background: blue;
background: -webkit-linear-gradient(to left, black, blue, blue, black 800px);
background: linear-gradient(to left, black, blue, blue, black 800px);
}
Gradient bg is stopping after 800px (what I want), but it is on the right side of the screen, instead of behind the content of the webpage. I cannot move it to anywhere else. Also it is appearing at different distances from the content, depending of the window size. I need it to be fixed to the center, behind my content.
Maybe something like the next line exists?
background: linear-gradient(to sides, blue, black 400px);
So I'd need to be able to set the starting position of the linear-gradient to the center and let the browser run it to both sides.
400px from center is where it should stop (and after that use the last color) - so a total of 800px wide the gradient should be.
If i understand your request correctly, this is what you want:
body, html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-image: linear-gradient(to right, black, blue 400px, black 800px);
background-size: 800px 100%;
background-position: 50% 100%;
background-repeat: no-repeat;
}
Try something like this
background: linear-gradient(to left, black, blue 25%, blue 75%, black 100%);
Using percentages ensures your page will scale, and you'll have the left and right quarters of your screen black with the middle half solid blue!
I have a "right" gradient that I'm trying to position it so that it stops 20px from the bottom of my div. Meaning, the gradient flows from left to right but the bottom 20 pixels of my div I would like it to be white.
I've tried the positioning code below and it has worked without the image but I can't get it to work with the image.
If you look at the image, you can see what I'm trying to do here. Any help would be greatly appreciated.
height: 200px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -webkit-linear-gradient(left,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -o-linear-gradient(right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -moz-linear-gradient(right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png"), linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
This is how it would work but neither the image or the gradient have any transparency so in the example they will cover each other up in every which order you place them :
http://codepen.io/anon/pen/OPKKMO?editors=010
div {
height: 200px;
background: -webkit-linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) top left / 100% calc(100% - 20px), url(http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png) top left / 100% 100%;
background: linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) top left / 100% calc(100% - 20px), url(http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png) top left / 100% 100%;
background-repeat: no-repeat;
}
I've reversed the placement here otherwise the gradient wouldn't be visible at all. Just focused on the it's height so the other dimensions may be off from what would be intended.
Just add a div around that, and set the CSS to
padding-bottom:20px;
So you have
<div class="paddingBTM"><div class="gradient"></div></div>