I have a background image set on the .section class in CSS. On that, I have an opacity as well. My child img is a transparent png however it's showing behind the background image on the div and it's also inheriting the opacity i have on the background image. How can I bring this to the top? I tried using z-indexes but it was not solving it.
.section {
background-size: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-image: url(/image/bg.png);
background-repeat: no-repeat;
position: relative;
}
.section:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #000000, #000000);
opacity: 0.6;
}
.logo {
width: 100%;
}
<div class="section">
<img class="logo" src={ "imgafi2x.png"}/>
</div>
Just using the below code:
Note: I didn't add snippet because it was React & SCSS. Stack Snippets don't support both React & SCSS. That's the reason I have linked to JSBin.
.section {
background-size: 100%;
background-color: rgba(0,0,0,0.5);
background-image: url(//placehold.it/500?text=BG);
background-repeat: no-repeat;
position:relative;
&:before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#000000,#000000);
opacity: .6;
z-index: 1;
}
.logo {
width: 100%;
position: relative; /* Change Here */
z-index: 2; /* Change Here */
}
}
Preview
Fiddle: http://output.jsbin.com/lepahirifa
Related
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.
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>
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>
I am trying to apply a simple css3 animation, and apply opacity to the background image when the text jumps but it effect the whole div's.
Here is the jsfiddle link
And this is the main wrapper div:
.movie_thumb_wrapper {
float: left;
line-height: 31px;
background-color: #424755;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
height: 140px;
width: 220px;
background-size: 220px 140px;
background-repeat: no-repeat;
background-color:#1a1c26;
}
A slightly different approach from Vitorino Fernandes' answer would be to 'nest' a pseudo element between the text and background:
div {
position: relative;
height: 300px;
width: 300px;
display: inline-block;
color:white;
}
div:before,
div:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition:all 0.8s;
}
div:before {
background: rgba(0, 0, 0, 0); /*this changes on hover - you might just want to change it here to get rid of the hover altogether*/
z-index: -1;
}
div:after {
z-index: -2;
background: url(http://placekitten.com/g/300/300);
}
div:hover:before{
background: rgba(0, 0, 0, 0.6);
}
<div>Hover to see effect</div>
So, in terms of your fiddle, add:
.movie_thumb_wrapper{
position:relative;
}
.movie_thumb_wrapper:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition:all 0.8s;
background:rgba(0,0,0,0.6);
z-index:-2;
}
jsfiddle example
Short answer, you can't. you need to create layers, using CSS position absolute, and z-index, so the text sits "on top of" the semi transparent layer. (instead of "inside" it as a a child element)
You can use pseudo element :after
div {
width: 200px;
position: relative;
border-radius: 5px;
text-align: center;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
opacity: .7;
right: 0;
bottom: 0;
z-index: -1; /* so that it goes in the backward */
background: url('http://placeimg.com/200/480/any')
}
<div>
<h1>Check my background image</h1>
</div>
instead of hex color code specify rgba and adjust a as required
background-color:rgba(255,0,0,0.5);
reference
Uhm,
background: rgba(0, 0, 0, 0.75);
does the job!