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>
Related
This question already has answers here:
Is it possible to have two background colors for a single html element? [duplicate]
(3 answers)
Closed 1 year ago.
I have managed to achieve what I'm trying to do from top to bottom using the following:
/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(blue, blue);
background-size: 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
Is there a way to fill the div from bottom to top so that the lower half is blue and the other half is white in this example?
You can set background: blue as the first property and change the linear-gradient to the values of white, white to invert the declaration.
/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
background: blue;
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(white, white);
background-size: 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
is this what you mean to do? You can change the background-size: 100% 70% to play with how far you want it to feed into the other space.
.test {
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(white, blue);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: bottom;
}
<div class="test">
</div>
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>
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 apply a CSS filter to a background image
(22 answers)
Closed 3 years ago.
Hi I have <div class="jumbotron text-center"><nav>something</nav></div> this line of code and the jumbotron has some CSS effects something like
.jumbotron{
background: url("image-url") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-size: cover;
height: 78vh;
filter: brightness(50%);
}
but all I want is only the jumbotron's background image gets the CSS effects, not the nav tag. currently, the nav tag inherits thefilter: brigtness (50%), is there anyway only the background-image gets the effect?
No, it's not possible. A filter will affect current element with all its contents (including children).
Therefore the way to go here is to move <nav> outside of .jumbotron, wrap them in a common relative parent and render <nav> above .jumbotron.
Proof of concept:
.relative {
position: relative;
}
.relative > .absolute {
position: absolute;
width: 100%;
top: 0;
/* making it visible */
background-color: rgba(255,255,255,.25);
border-bottom: 1px solid white;
color: white;
padding: 1rem;
box-sizing: border-box;
}
.jumbotron{
background: url("https://picsum.photos/id/237/1024/540") no-repeat center center /cover;
height: 78vh;
filter: brightness(50%);
}
<div class="relative">
<div class="jumbotron"></div>
<nav class="absolute">something</nav>
</div>
Feel free to rename the classes and adjust to your particular needs.
This question already has answers here:
CSS Zigzag Border with a Textured Background
(4 answers)
Closed 6 years ago.
I am trying to get this effect along the baseline of my header element.
What is the best way to go about it? Is there any way to do it without images (maybe SVG)?
A way I reckon this could be accomplished pretty nicely is using a repeat-x background image of a white square on an absolutely positioned pseudo element. However, that uses images and I'd love to be able to avoid that.
Here is solution. It's called zig-zag border.
http://jsfiddle.net/justinmc/QqnD3/
<div class="container">
<h1>Content Here</h1>
</div>
.container {
position: relative;
padding: 8px 8px 32px 8px;
background: #dddccf;
}
.container:after {
background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 32px 32px;
content: " ";
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 32px;
}
credits
https://cocreate.localmotors.com/blog/post/zig-zag-borders-in-css/1205/