This question already has answers here:
How do I give text or an image a transparent background using CSS?
(29 answers)
Can I set an opacity only to the background image of a div?
(8 answers)
Set opacity of background image without affecting child elements
(15 answers)
Closed 4 years ago.
I am trying to change the opacity of my background image to make it match the website. The problem is that the opacity: 0.5; change everything within the element. So not only the background image change but also the text and every other element in the section. How am i supposed to change only the color of the image? Here is my code:
section {
background-image: url(../IMG/Photo_NR1.jpg);
padding: 15px;
width: 100%;
height: 700px;
}
I have done some research but i couldn't find anything. I tried to have all my elements out of the <section> tag but then i was forced to change the position of the elements again. Thanks for your time :)
You could also do this by a pseudo element. Something like this:
section {
position: relative;
padding: 15px;
width: 100%;
height: 700px;
}
section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: .5;
background-image: url(../IMG/Photo_NR1.jpg);
}
So you do not need an image tag and you separating the design from content.
Try to seperate the image.
Html:
<div class="my-container">
<img src="your/image">
</div>
Css:
.my-container {
position: relative;
overflow: hidden;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.5;
}
Source:
https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 2 years ago.
I'm working on a project in ReactJS and I need to integrate a video in the background of a div. Now I have a div on top of the background which shows the video as is, but the rest of the background needs to be blurred, kinda like this. Is there any way I can do this using CSS?
Yes, use the filter CSS property on an element that will absolutely fill a parent element to act as a backdrop.
html,
body {
margin: 0;
padding: 0;
}
.filter-demo__main {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.filter-demo__bg {
/* You'll have to keep this and the img src in sync*/
background-image: url("https://placeimg.com/640/480/nature");
background-size: cover;
}
.filter-demo__bg {
position: absolute;
z-index: 1;
/*
* The negative values of top, right, bottom, left are to
* account for the "bleeding" effect of the underlying element's
* color showing through. Set them to 0 to see what I mean.
* Their values should about the negative value whatever you feed
* the blur().
*/
filter: blur(10px);
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
.filter-demo__actual {
z-index: 2;
border: 10px solid white;
max-height: 50%;
max-width: 50%;
}
<div class="filter-demo__main">
<div class="filter-demo__bg"></div>
<!-- Make sure the img src is the same as the background image for the filter-demo__bg -->
<img class="filter-demo__actual" src="https://placeimg.com/640/480/nature" alt="A placeholder image of nature" />
</div>
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Text in Border CSS HTML
(10 answers)
Closed 2 years ago.
I need to put this image, and also make this risk at the center of it. Is there any kind of border that make this?
HTML:
<div id="discussoes">
<img id ="img-topico" src="botão - criar tópico.png"/>
</div>
You can do it with a pseudo element.
This solution is flexible (works with every image/line height).
jsFiddle
HTML
<div class="middle-border">
<img/>
</div>
CSS
img {
width: 80px;
height: 80px;
background: blue;
display: block;
margin: 0 auto;
z-index: 2;
position: relative;
}
.middle-border {
position: relative;
background: yellow;
text-align: center;
}
.middle-border::before {
content: "";
display: block;
height: 5px;
background: red;
width: 100%;
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
}
Result
This question already has answers here:
Why is my element not sticking to the left when using position sticky in css?
(2 answers)
Why isn't position:sticky with left:0 working inside a scrollable container?
(1 answer)
Closed 3 years ago.
I'm trying to make an interface where two parts overlap, and one can scroll through the first part horizontally and the second part vertically. I quickly discovered the css sticky position.
Here is code demonstrating the issue I encountered using position: sticky; :
body {
margin: 0;
}
#d1 {
background: red;
position: sticky;
top: 0;
width: 2000px;
height: 50px;
opacity: 0.8;
}
#d2 {
background: blue;
position: sticky;
left: 0;
width: 50px;
height: 2000px;
opacity: 0.8;
}
<div id="d1"></div>
<div id="d2"></div>
(doesn't work in my browser, here is a jsfiddle https://jsfiddle.net/2bovgy84/1/ )
If you scroll down red div stays on top (what I expect), but if you scroll right blue div gets "stuck" half-way through (but I expect it to behave like the red one does)
I do not understand this behavior, at all.
body needs to be allowed to grow wider than HTML/window's width so it doesn't drag the blue element along with it (backgrounds on html/body shows what happens : https://jsfiddle.net/Lq473pue/1/ ).
you can use for that:
display:inline-block;
display:table;
float:left;
jsfiddle updated : https://jsfiddle.net/Lq473pue/
min-width:100%; can also be handy for body
The body needs the width or you need elements that are not sticky to create that width. Otherwise your body will be the width of the viewport.
https://jsfiddle.net/y9r74c0x/20/
body {
margin: 0;
width: 2000px;
}
#d1 {
background: red;
position: sticky;
bottom: 0;
width: 2000px;
height: 50px;
opacity: 0.8;
}
#d2 {
background: blue;
position: sticky;
right: 0;
width: 50px;
height: 2000px;
opacity: 0.8;
}
<div id="d1"></div>
<div id="d2"></div>
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Can I set an opacity only to the background image of a div?
(8 answers)
How to apply a CSS filter to a background image
(22 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
I want to put the white box on transparent filter.
By this source, overlay div is also transparent.
I don't want overaly translarent.
And I want to centerize the whitebo too.
Is there any good idea??
#filter {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
z-index: 100;
}
* html #filter {
/* ie用 */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight: document.body.offsetHeight + 'px');
}
#overlay {
display: block;
position: relative;
background: white;
top: 150px;
width: 400px;
height: 400px;
text-align: center;
color: #fff;
z-index: 102;
}
<div id="filter">
<div id="overlay">
</div>
</div>
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 4 years ago.
The goal is to have the image show up BEHIND the text upon hover. I've tried several different scenarios, but the z-index doesn't take.
Here is the site: http://lawnyavawnya.com/2018/artists/
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -5;
}
<h2 class="two">
<h2>ALBERT DALTON</h2>
<img src="http://lawnyavawnya.com/2018/wp-content/uploads/2018/04/Weary_Thumb.jpg" class="artisthover">
</h2>
What am I missing?
You cant nest h2 inside h2 because the like adding h3 inside h2 the second heading will be displayed smaller in some browsers.
z-index works with positioned elements only.
check this code see how it works:
.artisthover {
display: none;
}
h2.two:hover img {
position: relative;
display: block;
z-index: -1;
}
<h2 class="two">
ALBERT DALTON
<img src="http://via.placeholder.com/1000" class="artisthover">
</h2>
its not using Z-index but by using CSS background image this can be done easily
h2:hover {
height: 200px;
background-image: url('http://lawnyavawnya.com/2018/wp-content/uploads/2018/04/Weary_Thumb.jpg');
background-position: 0px 15px;
background-repeat: no-repeat;
background-size: auto;
}
<div>
<h2>ALBERT DALTON</h2>
</div>
In order to the z-index to work it needs a position different than static. Add position: relative; to the img and you'll get it to work.
h2.two:hover img {
display: block;
z-index: -5;
position: relative;
}
You could also add z-index to the h2 if you want the picture over the text:
h2.two {
position: relative;
z-index: 1;
}