I am attempting to apply a css background behind an img icon I am importing into my project. When trying to do so the css background that I have applied completely covers the image. I am attempting to have the image set on top of the background to give it a border look.
I've attempted to adjust the z-index but it had no effect. I also attempted to use add a pseudo class but that does not show the css background color I applied.
How can I achieve this?
Here is some code sample:
img {
height:32px;
width:32px;
z-index: 500;
}
.background {
width:40px;
height:40px;
background: blue;
opacity: 0.08;
border-radius: 8px;
}
<div class="background">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>
<div class="">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>
I am expecting the image to sit in the center of the background: blue; I am attempting to apply.
img {
height:32px;
width:32px;
z-index: 500;
position: absolute;
left: 12px;
top: 12px;
}
.background {
width:40px;
height:40px;
background: blue;
opacity: 0.08;
border-radius: 8px;
position: absolute;
}
<div class="background">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>
<div class="">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>
I just set the position to absolute and set the offsets.
This question already has answers here:
Darken image overlay and add text over it in CSS
(4 answers)
Closed 4 years ago.
I have an image class named image and a div named semitransparent.
i want to create a semitransparent background color in css, so that the image in image class can be seen through it
How to create this semi transparent color in css?
.semitransparent{
width:300px;
height:300px;
}
.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}
<div class="semitransparent">
<div class="image">
</div>
</div
You could use "position:absolute" to place the overlay - you'd need to find the position on the document and dimensions. But that can get annoying since you'd have to keep fixing it up as soon as the window dimensions change.
Have you heard of css-filter:blur?
Just have a class
.blur{ filter: blur(4px) }
and then add/remove that class to your image. Oh, wait .. not supported widely enough :-/
Depending on constraints you may have or could enforce there are a number of approaches to avoid having to fix up your overlay to keep matching the underlying elements position/dimensions.
.overlay{ position: absolute; width: 300; height: 300 }
.image{ position: relative; }
Then place the overlay inside the image DIV.
<div class="image"><div class="overlay"></div><img src="…" …></div>
It can be done using following code -
<div class="image">
<div class="semitransparent">
</div>
</div>
.semitransparent {
background: black;
opacity: 0.5;
position: absolute;
top:0; left:0; right:0; bottom:0;
}
.image {
background-image:url(https://picsum.photos/300/300/?random);
width:300px;
height:300px;
position: relative;
}
Fiddle link - https://jsfiddle.net/Lvhwmy31/
The thing is, the way you've started it.. it is not possible to make child element above the parent with z-index, what would be an obvious try of course.
It's sort of a css ninja style anyway :)
You would rather place them both as sibilings, give parent a relative, and overlay an absolute, and you're done.
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<style>
.child1{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}
.child2{
background-color: rgba(138, 43, 226, 0.6);
width:300px;
height:300px;
position: absolute;
top: 0px;
}
.parent {
position: relative;
height: 2000px;
}
</style>
.full {
background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
min-height: 300px;
}
.full {
background-size: cover;
position: relative;
}
.full:hover .overlay-effect {
opacity: 1;
cursor: pointer;
}
.overlay-effect {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: rgba(259, 67, 95, 0.7);
overflow:hidden;
}
.full a
{
color: #fff;
}
.full h3 {
padding: 15px 30px;
}
#media screen and (max-width: 368px) {
.full{margin-bottom: 10px;}
}
<div class="full">
</div>
</div
check this code, Change "rgba" color while you want.
<div class="semitransparent">
<div class="image">
</div>
</div
.semitransparent{
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.5);
}
.image{
background-image:url(https://picsum.photos/300/300/?image=206);
width:300px;
height:300px;
}
I know this may seem like a newby question, but is it possible to set an image element as a parent? If so, how can I do so?
Heres an example of what I'm looking for:
Also, the reason I can't just have the div element as the parent is that I want that text element relative to that image element, not the div element. This way I can center the text relative to the image. Thanks in advance for any help!
Looks like I've figured it out. I started messing with some values and I got it.
HTML:
<div id="main-div">
<img id="image" src="url.com/image.png">
<h1 id="text">Caption</h1>
</div>
CSS:
#main-div {
position: absolute;
top: 30px;
left: 50%;
margin: 0px auto;
transform: translate(-50%, 0);
}
#image {
position: absolute;
top: 130px;
left: 50%;
margin: 0px auto;
transform: translate(-50%, 0);
color: white;
font-family: "Roboto";
text-align: center;
}
#text {
position: absolute;
top: 30px;
left: 15%;
margin: 0px auto;
transform: translate(-50%, 0);
display: block;
border: thin red solid;
}
Here's a JS Fiddle of the code and final result: https://jsfiddle.net/k3b70Lg7/
No you cannot because image elements are replaced.
You can however wrap the image and the text element in another div and position that.
<div class="outer-black">
<div class="inner-image-text-wrapper">
<img src="..">
<div class="text"></div>
</div>
</div>
Now setting the wrapper to be inline-text means that it will expand according to contents (the image) and by setting it also to be position:relative you can position the text (position:absolute) wherever you want inside it.
Full example
.outer-black {
background: black;
padding: 2em;
}
.inner-image-text-wrapper{
position:relative;
display:inline-block;
}
.inner-image-text-wrapper img{display:block;}
.inner-image-text-wrapper .text{
position:absolute;
top:105%;
left:5%;
right:5%;
text-align:center;
background:rgba(255,255,255,0.5);
}
<div class="outer-black">
<div class="inner-image-text-wrapper">
<img src="http://lorempicsum.com/simpsons/300/200/1">
<div class="text">image caption</div>
</div>
</div>
My HTML code:
<div id="backgroundH"></div>
<div id="header">
<h2> Premium Store </h2>
</div>
My CSS code:
#backgroundH {
width: 100%;
height: 50px;
background-color: #dddddd;
}
#header {
top:-50px;
color:black;
font-family:Courier New;
}
body {
background-color:#cccccc;
}
So why isn't it working? I tried everything. Can somebody show me how to put that text over my div which I am using as a background in this case?
It should look like a gray background underneath a text which says "premium store".
You've got the order of your divs wrong it should be like this:
http://jsfiddle.net/mCGt8/
html:
<div id="backgroundH">
<div id="header">
<h2> Premium Store </h2>
</div>
</div>
css:
#backgroundH {
width: 100%;
height: 50px;
background-color: #dddddd;
}
#header {
top:-50px;
color:black;
font-family:Courier New;
}
body {
background-color:#cccccc;
}
In text-div you are using top: -50px, so I believe you want text-div sibling to background-div and you missed position: relative.
#header {
position: relative;
top: -50px;
color: black;
font-family: Courier New;
}
The problem with position: relative is that the space that div would fill before top: -50px stills there.
So, you have 2 ways:
CSS: use margin-top: -50px;
HTML: nest text-div to background-div if it's possible. (preferred)
I want to achieve this using html and css:
I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.
jsFiddle of my try here
The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).
You can use opacity in combination with background color, like this:
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}
<div id="container">
containter text
<div id="box">
box text
</div>
</div>
Live demo
As far as I know you can't do it in a simple way. There a couple of options here:
Use absolute positioning to position box "inside" the container.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}
<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>
Use Javascript - almost the same as above, but position and size don't have to be hardcoded.
You can't apply an opacity property without affecting a child element!
"Opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another... If you do not want to apply opacity to child elements, use the background property instead." https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
If you want the opacity to be applied only to the background, without affecting the child elements, use:
background-color: rgba(255, 255, 255, .3)
However, you can achieve the desired effect if you place them inside a div parent element and use CSS position property:
.parent {
border: solid green 3px;
position: relative;
width: 400px;
height: 200px;
}
.sibling-one {
border: solid red 3px;
position: absolute;
box-sizing: border-box;
width: 400px;
height: 200px;
opacity: .3;
}
.sibling-two {
border: solid blue 1px;
margin: 10px;
width: 200px;
height: 100px;
position: absolute;
transform: translateY(50%);
}
<div class="parent">
<div class="sibling-one">
<p>A sibling's one element</p>
</div>
<div class="sibling-two">
<p>A sibling's two element</p>
</div>
</div>
Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}
<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>
See a working codepen here
Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.
Apply this css rule
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
In addition to this, you have to declare background: transparent for IE web browsers.
For more details visit the following link:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Any child of an element with opacity set will take on that opacity.
To achieve this style you could use rgba colours and filters for IE for the background, and opacity on the textual elements. So long as the second box isn't a child of one of the text elements, then it won't inherit the opacity.
Another workaround is to simply use an overlay background to create a similar effect.
I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.
Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.
If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.
It's not technically what you are trying to do, but aesthetically it can give a very similar effect and UX wise accomplishes the same thing. It is also very easy to do, and widely supported across pretty much everything.
Opacity will always inherits by the child element regardless whatever the element in there, there is no workaround up to today have suggested, when the moving of the child element outside the transparency background is not an option like in a popup menu/dialog box creation, use of background with the rgba is the solution.
Here is a input box that i created that i can turn on or off with the class property invisible by javascript
<div id="blackout" class="invisible">
<div id="middlebox">
<p>Enter the field name: </p>
<input type="text" id="fieldvalue" />
<input type="button" value="OK" id="addfname" />
</div>
</div>
CSS
#blackout {
z-index: 9999;
background: rgba(200, 200, 200, 0.6);
height: 100%;
width: 100%;
display: block;
padding: 0px;
clear: both;
float: left;
position: absolute;
margin-top: -10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -10px;
}
#blackout #middlebox {
border: thick solid #333;
margin: 0px;
height: 150px;
width: 300px;
background-color: #FFF;
top: 50%;
left: 50%;
position: absolute;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10px 50px 0px 50px;
}
#middlebox p {
float: left;
width:100%;
clear:both;
}
#middlebox input {
clear:both;
margin-bottom:10px;
}
#middlebox input[type=text]{
width:100%;
}
#middlebox input[type=button]{
float:right;
width:30%;
}
.invisible{
visibility:hidden !important;
}
Use such elements that you can add :before or :after. My solution
<div class="container">
<div>
Inside of container element is not effected by opacity.
</div>
</div>
Css.
.container{
position: relative;
}
.container::before{
content: '';
height: 100%;
width: 100%;
position: absolute;
background-color: #000000;
opacity: .25
}
This might not be the most orthodox method but you can use a small semi-transparent background image for each div / container that repeats. It does seem that in this day and age you should be able to achieve this in pure (simple not hackish) css with no js but as the answers above show it isn't that straight forward...
Using a tiled image might seem dated but will work no worries across all browsers.
You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it.
And use no background on your container.
Now container's children have no opaque parent and the problem vanishes.