This question already has answers here:
Black transparent overlay on image hover with only CSS?
(8 answers)
Closed 3 years ago.
In my project, I have a div and I set the background of it to an image. I now want to add a dark overlay to this image.
I have attempted to implement other solutions on the web, however I was unsuccessful when trying.
Here is my existing code:
<div class="bgDiv">
</div>
.bgDiv {
width: 100%;
height: 88vh;
position: relative;
background: url("https://images.porffrrf.com/ededd/dedede444334ffr0") no-repeat center center/cover;
}
Does anybody know how to implement this functionality? Thank you.
You can add linear-gradient to your background property:
.bgDiv {
width: 100%;
height: 88vh;
position: relative;
background: linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
), url("https://www.esa.int/var/esa/storage/images/esa_multimedia/videos/2018/05/mars_sample_return/17493376-1-eng-GB/Mars_sample_return_pillars.jpg") no-repeat center center/cover;
}
<div class="bgDiv">
</div>
An absolute child can be used to fill the entire parent and give it an so called overlay.
.bgDiv {
width: 100%;
height: 88vh;
position: relative;
background: url("https://images.unsplash.com/photo-1562887042-ed962a48feaa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80") no-repeat center center/cover;
}
.overlay{
position: absolute;
background-color: black;
height: 100%;
width: 100%;
opacity: 0.5;
}
<div class="bgDiv">
<div class="overlay">
</div>
</div>
Related
I have an image in HTML
I want to give linear gradient to it. I know how to give linear gradient to a pic pulled in CSS. But can we do the same if we have an image pulled in HTML without giving it inline CSS?
If i have understood correctly you can do that by adding the style attribute to the image and then add the css inside that.
As far as I understand your question you need the following:
<div class="container">
<img class="image" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" />
<div class="grad"></div>
</div>
.container {
position: relative;
}
.image {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 200px;
}
.grad {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 200px;
background: linear-gradient(
to right,
transparent 0%,
rgba(255, 0, 0, 0.5)
);
}
https://jsfiddle.net/whjptge1/
Please correct and share your fiddle if your question addresses the different problem
i'm trying to apply a gradient to a skewed div but the gradient starts where the skew starts and it doesn't apply the gradient i'm looking for no matter what angle i use.
This is the gradient i'm trying to replicate
but I get a very different result...the colors are off and it's too green on the right side of mine. You can notice that on the image above, the gradient starts at the little wedge at the bottom but mine starts on the entire bottom part.
.main {
height: 80vh;
background-color: white;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);;
transform: skewY(-12deg);
transform-origin: 0;
}
<div class="main">
<div class="skew-div">
</div>
</div>
is this possible without just placing the image as a background?
Use clip-path
.main {
height: 80vh;
background-color: white;
position:relative;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
<div class="main">
<div class="skew-div">
</div>
</div>
You can use clip-path property
.main {
height: 80vh;
background-color: white;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
;
clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}
<div class="main">
<div class="skew-div">
</div>
</div>
Instead of using transform: skewY() you may use clip-path property. transform sometimes creates some sudden confusing problems. That's why you should sometimes escape using that property. Else use it using proper Browser Vendor Prefixes.
If you feel any difficulty configuring clip-path property then you may use this 3rd party website for clip-path value generation =>
https://bennettfeely.com/clippy/
This question already has answers here:
How to add a color overlay to a background image? [duplicate]
(4 answers)
Closed 3 years ago.
How to add a background-image + background-color with opacity for body tag?
try this code include the div tags in your body!
.background {
background:url('http://placehold.it/100x100');
position: relative;
height: 100px;
width: 100px;
}
.layer {
background-color: rgba(75, 86, 160, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="background">
<div class="layer">
</div>
</div>
You can use background-blend-mode on the <div> that has the background-image.
EDIT: You might want to create a <div> element that acts as the main container for your site instead of adding the background image onto <body>.
.card__image {
width: 300px;
height: 300px;
/* Change the opacity of Dodger Blue background by
selecting a value between 0-1 for the fourth argument. */
background: rgba(34, 167, 240, 0.75);
background-image: url('https://unsplash.it/300');
background-blend-mode: multiply;
}
<div class="card__image"></div>
This question already has answers here:
How to add a color overlay to a background image? [duplicate]
(4 answers)
Closed 4 years ago.
I'm wondering if it's possible to do away with my second div/class opacity and add the opacity to the image using CSS on the hero class?
.hero {
background-image: url('https://cdn10.bostonmagazine.com/wp-content/uploads/sites/2/2016/03/nkotb.jpg');
background-size: cover;
position: relative;
height: 500px;
}
.hero .opacity {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
}
<div class="hero">
<div class="opacity">
</div>
</div>
You can use multiple background images, which are supported by all modern browsers.
.hero {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),
url('https://cdn10.bostonmagazine.com/wp-content/uploads/sites/2/2016/03/nkotb.jpg');
background-size: cover;
color: white;
position: relative;
height: 500px;
}
<div class="hero">Some content</div>
I'm trying to achieve the background effect on this website:
http://mountaintheme.com/themeforest/mountain/home.html
The background pictures seem to be covered in a dotted overlay sort of thing.
Is there a way to create this effect with CSS only?
A little bit late, but here is a solution that uses just CSS to create the dotted overlay using a pattern created with radial-gradient.
.image {
width: 800px;
height: 600px;
position: relative;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/6e/Rathong_from_Zemathang2.jpg');
background-size: cover;
}
.image:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(127, 127, 127, 0.5);
background-image: radial-gradient(black 33%, transparent 33%);
background-size: 2px 2px;
}
<div class="image"></div>
Here is my way of doing this https://jsfiddle.net/soumyabg/wefLyrhp/
Very minimal and pure CSS solution. The catch is that the actual image is the background of <a> tag (with display:block), and <img> is the dot overlay (its size should be defined in the CSS).
HTML:
<div class="image-container">
<a class="dotm" href="#">
<img src="http://s14.directupload.net/images/111129/44ga9qid.png" alt="dotm" title="dotm" class="dotm-overlay">
</a>
</div>
CSS:
.dotm {
display: block;
background: url(https://media.giphy.com/media/SOoaHiWfwZyfu/giphy.gif) no-repeat; /* change with the image URL */
background-size: cover;
}
.dotm-overlay {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
width: 100%;
height: 400px; /*height of the image*/
}
Output:
You can implement this using only css background properties:
background-image: radial-gradient(black 50%, transparent 50%);
background-size: 4px 4px;
Here's one way of doing it.
<body>
<div id="overlay">
image
</div>
<div id="page">
<div id="content">
....
Basically, you add a container outside your page container.
Add a fixed position for it, and add a pseudo element :after to it and give it a background image.
Assume you have an object with "bg" id, this css class will add small dotted background:
#bg {
background-image: radial-gradient(#000 10%, transparent 10%);
background-size: 15px 15px;
background-color: #EEE;
}
You can change dots color by replace black (#000) with any color, and background color by replacing #EEE.
To adjust dots size, play with 10% and 15px.