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.
Related
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 have an image on which I want to overlay some white text. I'm trying to achieve the same thing video-sharing sites such as YouTube do with the video duration in the corner of the thumbnail. How can I do this with CSS/HTML?
Like This:
Try This :
.container {
width: 300px;
position: relative;
}
.container img {
width: 100%;
}
.container h3 {
background-color: rgba(0,0,0,0.3);
color: #fff;
position: absolute;
bottom: 0;
right: 2px;
}
<div class="container">
<img src="https://i.imgur.com/0s8kLb7.png">
<h3>Cute Animal</h3>
</div>
.main {
width:400px;
position:relative;
}
.picture {
width:100%;
}
.main p {
position:absolute;
bottom:0px;
right:0px;
color:#fff;
font-size:14px;
background:#999;
padding:3px;
z-index:99;
}
<div class="main">
<p>
Hello
</p>
<img class="picture" src="http://lorempixel.com/400/200/sports/" alt="">
</div>
You can use CSS for it.
There are two ways of doing it ~
position: absolute;
top: 200px;
left 200px;
So this one sets the position of an element to absolute and then you can specify the location in pixels but it would make it something which can't change it's position in response to other elements. It would make your element like a rectangle in Paint which you can move at freely at any place.
The Second one is recommended by me ~
margin-top: -200px;
This one is a dirty way of doing it but it is useful. You can pull thing upwards using this. If your text is on side of the text you can use margin-left as same. It depends on you which method you want to use and how much pixels do you want to specify.
In your case I could give mathematical expression for doing this ~
margin-top: -text_height;
margin-left: video_width - text_width;
Enjoy :D
Here you go :
HTML :
<div class="image">
<img src="http://lorempixel.com/400/400/sports/2" alt="" />
<h2><span>Some Text</span></h2></div><br/>
</div>
CSS :
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 300px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.4);
padding: 10px;
}
https://jsfiddle.net/emilvr/f03m3Lks/
You can play with top & left to set your desire location
This is very easy to do. I am sure you do not have enough knowledge of CSS. But any way I will tell you on this.
Your structure should be like below:
<div class="relative">
<img src="" />
<span class="absolute">text</span>
</div>
Then add css for this
.relative{float:left; position;relative;}
.absolute{position:absolute; bottom:0px; right:0px;}
Adjust position as needed.
Everything is explained in the title of this post. I'm trying to put an PNG image in the center bottom border of a div element.
.content_block {
border: ridge;
border-width: 1px;
border-color: #969696;
height: 200px;
width: 200px;
}
.content_block.orange {
background-image: linear-gradient(#FBB03B, #FF9933);
}
<div class="content_block orange"></div>
Here's an image of what I'm trying to do:
I searched the net for a way to that with CSS, and border-image and stuff, but nothing worked.
To achieve the effect of it being exactly in the middle of the border, you will have to include the border with the image by inheriting it, and making it invisible. Like this, you can 'calculate' with it.
See this Fiddle for the effect. In this Fiddle, I've created a pseudo element that has a background-image of a play button.
The CSS that does the trick is this:
div::after{
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 30px;
height: 30px;
background-image: url('http://www.iconsdb.com/icons/preview/gray/video-play-3-xxl.png');
background-size: cover;
background-repeat: no-repeat;
transform: translate(-50%, -50%);
border-top: inherit;
border-top-color: transparent;
}
I've placed it to the absolute bottom and 50% from the left. Then with the transform property, I shifted it to be centered around these points (50% from the left, and 100% from the top);
Then to make it move along with the border, I inherited only at the top, and made it invisible.
.content-block {
position: relative;
width: 200px; height: 100px;
border: 1px solid #f0f;
}
.content-block img{
position: absolute;
left: 50%; bottom: 0;
width: 50px; height: 50px; margin: -25px;
}
<div class="content-block">
<img src="http://placehold.it/50x50" alt="">
</div>
If you have a relative positioned parent, you can manipulate the position of an inner child using position:absolute;
Add an img in html
<div class="content_block orange">
<img class='element' src='https://cdn0.iconfinder.com/data/icons/form-elements-kit/100/checked-green-rounded-01-128.png'/>
</div>
Add this to your css.
.element { width:32px;
height:33px;
display:block;
background-color:grey;
margin-left:auto;
margin-right:auto;
margin-top:185px;
border-radius:100%;
}
Hope that helps!
Put an image inside the orange div and add text-align:center to the div
<div class="content_block orange">
<img src="" height="30" width="30">
</div>
and then set margin-top to the img. Check this Fiddle
How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/
Im trying to put a background image over an image.
Basically its to show if a 'user' has approved or denied something.
I want if approved to display a green tick over the users display image.
I tried to create it but what i have does not work.
This is what i have so far:
Html
<img class="small-profile-img accepted" src="http://www.image.com/image.gif" alt="">
CSS
.small-profile-img{
width:30px;
display:inline;
border:2px solid #000000;
}
.accepted{
background-image:url("tick.png") !important;
background-repeat:no-repeat;
background-position:right bottom;
z-index:100;
background-size:18px;
}
See jsfiddle for working example.
jsfiddle
The solution would be is to use wrapper with after pseudo element for accepted class:
.accepted:after {
content: '';
display: block;
height: 18px;
width: 18px;
position: absolute;
bottom: 0;
right: 0;
background-image:url("http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png");
background-repeat: no-repeat;
background-position: right bottom;
z-index: 100;
background-size: 18px;
}
HTML
<div class="small-profile-img accepted">
<img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
</div>
http://jsfiddle.net/vpgjr/7/
Background images go behind foreground content. An <img> is foreground content.
The only way you could see the background image would be if the foreground image had translucent pixels over the background image.
The tick appears to be content (rather than decoration) though, so it should probably be represented as an <img> anyway.
<div class="image-container">
<img class="small-profile-img"
src="http://www.image.com/image.gif"
alt="">
<img class="approved"
src="tick.png"
alt="Approved">
</div>
.image-container {
position: relative;
}
.image-container .small-profile-img {
position: relative;
z-index: 2;
}
.image-container .approved {
position: absolute;
z-index: 3;
top: 50px;
left: 50px;
}
Why dont you use position:absolute
HMTL
<div class="wrap">
<img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
<div class="inner"> <img src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" width="18"/></div>
</div>
CSS
.wrap{
position:relative;
background:red;
height:auto; width:30px;
font-size:0
}
.wrap > img{
width:30px;
display:inline;
}
.inner{
position:absolute;
top:30%;
left:50%;
margin:-5px 0 0 -9px
}
DEMO
set
position:absolute
Then set left,top (bottom,right if needed) property.
yea, i'd go the other way around.
change the class of the img when it's accepted.
HTML:
<div class='holder'>
<img class='unaccepted' src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" alt="">
</div>
CSS:
.small-profile-img{
width:30px;
display:inline;
border:2px solid #000000;
}
.holder{
width:40px;
height:30px;
background-image:url("http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif");
background-size: 100%, 100%;
background-repeat:no-repeat;
background-position:center;
text-align: center;
}
.accepted{
border:none;
display:inline;
}
.unaccepted{
display:none;
}