How to create a partial width opacity ?
I have a div that has a background image with transparency, I used after to do get the effect like this
.indicators-menu {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
z-index: 1;
}
.indicators-menu::after {
background-image: url('bg_platform_repeat.jpg');
content: "";
opacity: 0.9;
top: 0;
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: unset;
}
This works great, but what I need to do is to split the opacity by width
instead of 100% to 80% with opacity 0.9 and 20% with opacity 1
I thought to use the CSS mask property but I see that its not well supported
what i need to do is to split the opacity by width instead of 100% to 80% with opacity 0.9 and 20% with opacity 1
Use two pseudo-elements with the same background image but position them differently.
div {
width: 460px;
height: 300px;
margin: 1em auto;
border: 1px solid red;
position: relative;
}
div:before,
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-image: url(http://www.fillmurray.com/460/300);
background-repeat: no-repeat;
background-size: cover;
}
div:before {
width: 80%;
opacity: 0.5;
/* for example */
}
div:after {
width: 20%;
left: 80%;
background-position: 100% 0;
}
<div>
</div>
One idea is to use an overlay above the image to simulate this effect. The color used need to be the same as the below background:
.box {
background:
linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)) left/80% 100%,
url('https://picsum.photos/200/200?image=1069') center/cover;
background-repeat: no-repeat;
width: 200px;
height: 200px;
}
<div class="box">
</div>
Use :before with background: white; and opacity:0.1(I set 0.4 only you to see the difference) and width:80%
.indicators-menu::after,.indicators-menu::before{
background-image: url('https://i.imgur.com/BK7wL0d.jpg');
content: "";
opacity:1;
top: 0;
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: unset;
}
.indicators-menu::before{
background: white;
opacity: 0.4;
z-index: 2;
width: 80%;
}
<div class="indicators-menu">
</div>
Related
I have a card with image, text and overlay gradient.
The image is much bigger than its parent div. The image is made responsive to the size of parent div. I need to position the image inside div a certain way, so I use object-position for it.
However, when I try to position it, I get white space between the image and parent container, even though the image is bigger than the div..
I used position values from Figma which are :
position: absolute;
width: 386px;
height: 458px;
left: -33px;
top: -94px;
On the screenshot you can see how it should look like (on the left) and how it's done with the code below (on the right):
DEMO
https://github.com/meri-maki/stackoverflow-demo-ingrad
https://meri-maki.github.io/stackoverflow-demo-ingrad
.card {
border-radius: 24px;
width: 100%;
height: auto;
min-height: 328px;
max-height: 534px;
position: relative;
display: inline-block;
overflow: hidden;
}
.card img {
display: block;
vertical-align: bottom;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
/* ----------IMAGE POSITIONING---------- */
object-position: top -94px left -33px;
}
/* ----------gradient---------- */
.card:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
height: 66%;
background: linear-gradient(0deg, #181818 0%, rgba(25, 23, 29, 0.447294) 48.44%, rgba(24, 24, 24, 0) 100%);
opacity: 0.9;
}
/* ----------caption---------- */
.caption {
z-index: 10;
position: absolute;
left: 4.27%;
right: 8.54%;
top: 63.41%;
bottom: 7.32%;
}
<div class="card">
<img src="https://picsum.photos/1200" alt="">
<div class="caption">
<h4>Caption</h4>
</div>
</div>
I tried using transform: translate but got same result. What could be wrong?
You're shifting the image with negative position values. I'm not sure why, but you'd need to compensate by adding the reciprocal value to increase the size of the image accordingly.
Alternatively, set position to zero or center and eliminate those negative values.
.card {
border-radius: 24px;
width: 100%;
height: auto;
min-height: 328px;
max-height: 534px;
position: relative;
display: inline-block;
overflow: hidden;
}
.card img {
display: block;
vertical-align: bottom;
position: absolute;
object-fit: cover;
object-position: top -94px left -33px;
width: calc(100% + 33px); /* <------------- HERE */
height: calc(100% + 94px); /* <-------- AND HERE */
}
.card:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
height: 66%;
background: linear-gradient(0deg, #181818 0%, rgba(25, 23, 29, 0.447294) 48.44%, rgba(24, 24, 24, 0) 100%);
opacity: 0.9;
}
.caption {
z-index: 10;
position: absolute;
left: 4.27%;
right: 8.54%;
top: 63.41%;
bottom: 7.32%;
color: #fff;
}
<div class="card">
<img src="https://picsum.photos/1200" alt="">
<div class="caption">
<h4>Caption</h4>
</div>
</div>
I've got a background which needs to have a dark background like it's got a low brightness.
When I add my brightness to 80% it's perfect but then I also lose the brightness of my text which is overlayed and that decreases in brightness as well. Is there a way I can increase the brightness on the text?
background-image: url("https...);
background-position: 50% 50%;
background-size: cover;
padding: 100px;
filter: brightness(80%);
in this case ::before or ::after is solution
div {
width: 100%;
height: 200px;
font-size: 40px;
font-weight: bold;
color: #fff;
position: relative;
}
span {
position: relative;
z-index: 1;
}
div::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: brightness(80%);
background-image: url("https://images-na.ssl-images-amazon.com/images/I/41-SYJSrDgL.jpg");
background-position: 50% 50%;
background-size: cover;
z-index: 0;
}
<div><span>test<span></div>
I am trying to make a nice background with an image but I want the image repeated to fill the screen, with opacity set to 0.5 and it rotated 45 degrees. I have tried a number of things to accomplish this but have had no luck. Anyone have any ideas?
In this Codepen, I have the image rotated and opaque but cannot get background-repeat to work.
.background {
height: 500px;
width: 500px;
position: relative;
display: inline-block;
padding: 100px;
border: black 3px solid;
}
.background::before {
content: "";
position: absolute;
overflow: hidden;
width: 100px;
height: 100px;
left: 0;
top: 0;
z-index: -1;
opacity: 0.5;
background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
background-size: contain;
transform: rotate(45deg);
background-repeat: repeat;
opacity: 0.5;
}
<span class='background'>HElloWorld</span>
You can do it like below:
.background {
height: 500px;
width: 500px;
position: relative;
z-index:0;
display: inline-block;
overflow:hidden; /* hide the overflow here not on the pseudo element */
padding: 100px;
border: black 3px solid;
}
.background::before {
content: "";
position: absolute;
z-index: -1;
/* 141% ~ sqrt(2)x100% to make sure to cover all the area after the rotation */
width: 141%;
height:141%;
/**/
/* to center*/
left: 50%;
top: 50%;
/* */
background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
background-size: 100px 100px; /* size of the image*/
transform:translate(-50%,-50%) rotate(45deg); /* center the element then rotate */
opacity: 0.5;
}
<span class='background'>
HElloWorld
</span>
Try increasing the size of the ::before pseudo-element, and then decreasing the background size like this:
.background::before {
content: "";
position: absolute;
overflow: hidden;
width: 100%; /* made width 100% */
height: 100%; /* made height 100% */
left: 0;
top: 0;
z-index: -1;
opacity: 0.5;
background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
background-size: 100px; /* made background size smaller */
transform: rotate(45deg);
background-repeat: repeat;
opacity: 0.5;
}
This just makes the background pseudo-element the full size of the element, and then makes the background small and repeating. I hope this helps.
I'm going straight to the point here.
I want to create a simple window within an image.
outside the window will have a opacity like on the sample picture.
I'm not really good when it comes to css so please bear with me.
.section2{
}
.section2 .row{
margin: 0;
}
.the-container{
position: relative;
width: 100%;
height: 450px;
}
.the-container .text-center{
background: #fff;
opacity: .9;
}
.img-canvas{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
background-image: url(https://www.aman.com/sites/default/files/styles/1371x706/public/amanpulo-location-1200-x-825.jpg?itok=4BQy9j-X);
background-size: 100% 100%;
background-position: 50% 50%;
background-attachment: scroll;
z-index: -1;
}
.window{
position:absolute;
width:50%;
height:50%;
background-size: cover;
top:0;
left:25%;
z-index: -1;
opacity: 1;
}
<section class="section2" style="height:100vh;">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="the-container">
<div class="img-canvas"></div>
<div class="window"></div>
</div>
</div>
</div>
</section>
something like this:
and here's a fiddle for you to manipulate the code:
https://jsfiddle.net/Lk21vL01/
thanks in advance.
You were very close, you just needed to apply similar styling to your .window element and use background-attachment:fixed
see this updated jsfiddle
.section2{
}
.section2 .row{
margin: 0;
}
.the-container{
position: relative;
width: 100%;
height: 450px;
}
.the-container .text-center{
background: #fff;
opacity: .9;
}
.window,
.img-canvas{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
background-image: url(https://www.aman.com/sites/default/files/styles/1371x706/public/amanpulo-location-1200-x-825.jpg?itok=4BQy9j-X);
background-size: 100% 100%;
background-position: 50% 50%;
background-attachment:fixed;
z-index: -1;
opacity: 0.5;
}
.window{
position:absolute;
width:50%;
height:50%;
top:0;
left:25%;
z-index: -1;
opacity: 1;
}
Not the most proper way to achieve this, but you could use a box-shadow "hack" to create the effect you're looking for. Just set a box shadow around the window with 0 blur and a spread that will always bigger than the background (something like 1000, or even 5000 pixels).
#background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to bottom, slategray, #333);
overflow: hidden;
}
#window {
position: absolute;
width: 250px;
height: 100px;
top: 25%;
left: 25%;
box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.75);
}
<div id="background">
<div id="window">
</div>
</div>
I've been using that code on my body, to get a full background with some mi-transparent white background on it :
body {
background: url('../images/bg.jpg') no-repeat center center fixed;
padding-top: 50px;
}
body::after {
content: "";
background: white;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
The problem is that the white background doesn't go lower than the screen size as you can see here. Any idea how to fix that ?
It's because body::after isn't fixed, change the css like this :
body::after {
content: "";
background: white;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
}
Here is an example with a black background
Instead of using a ::before or ::after pseudo element, you can use css multple backgrounds.
Generate the base64 from this site: http://px64.net/
Apply the background to the body element.
#foo {
width: 400px;
height: 150px;
visibility: visible;
}
#foo {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYPhfDwACggF/yWU3jgAAAABJRU5ErkJggg==) repeat, url(http://www.openkorat.com/wp-content/uploads/2015/08/extra-bg-green.jpg) no-repeat;
background-size: auto, cover;
}
<div id="foo"></div>
Make the ::after element position: fixed.
Fiddle
body {
background: url('../images/bg.jpg') no-repeat center center fixed;
padding-top: 50px;
}
body::after {
content: "";
background: red;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
}
div {
height: 800px;
}
<div>div</div>