How do I position one image on top of another in HTML?
Ok, after some time, here's what I landed on:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
border: 1px red solid;
}
.image2 {
position: absolute;
top: 30px;
left: 30px;
border: 1px green solid;
}
<div class="parent">
<img class="image1" src="https://via.placeholder.com/50" />
<img class="image2" src="https://via.placeholder.com/100" />
</div>
Image in top right of other image?
The answer of @TheMaleBeyonce is right. with your current layout, you should make sure this div
element is just used to surround the outer image, and make sure the width of the div
is equal to the outer image.
Suppose the width of outer image is 200px, the right code as below:
<style>
.wrap {
position: relative;
width: 200px;
}
.inner {
position: absolute;
top: 0;
right: 0;
}
</style>
<div class="wrap">
<a href="https://example.com">
<img src="image.png">
</a>
<a class="inner" href="https://example2.com">
<img src="logo.png">
</a>
</div>
the demo
Position a image over another existing `img /` in CSS
you might want to do something like this:
<div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
<img src="/path/to/image.jpg " alt=.. width=.. height=..style="position: relative; z-index: 1;" />
<img src="/path/to/play.jpg " alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
</div>
of course do not use style=""
, but put styles into separate CSS files.
Explanation:
put two images into div. If you give position: relative;
property to your wrapper div, then anything inside this div would be position relatively to it. It means, you can add position: absolute;
to the play image and using left: XXpx;
and top: XXpx;
you can position it where you want. You might want to use z-index
to define which picture should be on the top. The higher z-index
the higher layer. Please note: z-index
works only if position
is set.
How to set an image on top of another image?
The key is to use percentages in combination with max-width.
The big image, you give it a max-width: 100%, therefor it will never be bigger as it own size, but also won't it be bigger as it's parent.
Wrap that image in a parent div. This div becomes a display: inline-block, so I will be as width as it's content. You place this div relative.
Then we add the little image inside the div and place it absolute. It's position then will be relative to the parent (div) and not the body. Give it a max-width of 25% (for example) and give it a top and left/right position in %.
HTML:
<div class="wrapper">
<img class="big-img" src="big.png" />
<img class="small-img" src="big.png" />
</div>
CSS:
.wrapper{
display: inline-block;
position:relative;
}
.big-img{
width: 100%;
max-width: 100%;
border: 1px solid blue;
}
.small-img{
border: 1px solid red;
position:absolute;
right: 10%;
top: 10%;
width: 25%;
max-width:25%;
}
DEMO
Make the result window smaller and you'll see the images resize.
Using CSS to display image over image: Position tags query
Nest them inside a relative
element:
<style type="text/css">
.container { position:relative; }
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; }
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; }
</style>
<div class="container">
<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">
</div>
http://jsfiddle.net/nUPsh/1/
This article explains the CSS position
property quite well:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
HTML Image Overlay Positioning
Use relative and absolute positioning to place the background image and the img on top of each other, than make the container a flexbox to center the img tag:
.container { height: 500px; width: 700px; display: flex; align-items: center; justify-content: center; position: relative;}
.container > #backimg { background-image: url(http://placekitten.com/700/500); background-position: center center; background-size: cover; filter: blur(3px); width: 100%; height: 100%;}
.container > img { width: 50%;}
.container > #backimg,.container > img{ position:absolute;}
<div class="container"> <div id="backimg"></div> <img src="http://placekitten.com/700/500" /></div>
How to display Base64 images in HTML
My suspect is of course the actual Base64 data. Otherwise it looks good to me. See this fiddle where a similar scheme is working. You may try specifying the character set.
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
Positioning and overlaying image on another image
Here's a simple example using divs instead of images: http://jsfiddle.net/sqJtr/
Basically, you put both of your images in the same container. Give the container a position that isn't static (in my example, relative). Then give the overlay image position: absolute
and position it however you want using bottom
and right
.
Embed image in a button element
You could use input type image.
<input type="image" src="http://example.com/path/to/image.png" />
It works as a button and can have the event handlers attached to it.
Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.
<button style="background: url(myimage.png)" ... />
Is it possible to set the equivalent of a src attribute of an img tag in CSS?
Use content:url("image.jpg")
.
Full working solution (Live Demo):
<!doctype html>
<style>
.MyClass123{
content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="MyClass123"/>
Related Topics
Bootstrap Collapse Accordion - Default Expand/Collapse
Working with CSS Floats in HTML2Pdf
CSSmin Not Correctly Handling @Import
Media Query About Screen Size Instead of Resolution
Rotating a Svg with CSS (Animation)
Ruby on Rails Dropdown <Select> Menu - How to Style or Apply Class to The Options
Change CSS Variables Dynamically in Angular
Overriding CSS on Github Pages Using Slate Theme
How to Prevent CSS Declaration Dropped Errors Cross Browser
Can Bootstrap 3 Grid Be Extended
Center Text Larger Than Container? (Without Using Separate Child Element)
Div Elements to Follow a Curved Path with CSS3
Bootstrap 3: How to Create Responsive, Square .Thumbnail Divs
Explain Regex That Finds CSS Comments
CSS- Target Text Links with Bottom Border on Hover, But Image Links with No Border
Which Framework Is Best for Starting with Responsive Web Design