Okay, this seems to be an issue with so many potential solutions but none that will work for what I want to do. I always want to display perfect circles, even if the underlying image is not a perfect circle. But, I don't want to specify an image dimension by px because I want it to be responsive. It seems that no matter which solution I try, the circles always either become warped into ovals or the picture dimensions completely take over and make it gigantic.
HTML:
<div class='item-image'>
<img class='img-circle img-responsive img-center' src='#' />
</div>
Goal:
Regardless of the image size (rectangles), I want the part of the image beneath the red circle to show through.
The best way to do this is per overlay. And make the circle with CSS!
<div class="wrapper">
<img src="#" class="img-responsive">
<div class="circle"></div>
</div>
.wrapper has position: relative and .circle has position: absolute and border-radius: 100%.
The wrapper has to be positioned with inline-block. Center the wrapper with text-align: center.
Center an absolute positioned element as follows:
.el {
position: absolute;
top: 50%;
margin-top: -(height / 2)%;
left: 50%;
margin-left: -(width / 2)%;
}
If you want the image inside the circle, make the circle bigger.
Example
HTML:
<div class="circle">
</div>
and use css for image in background:
.circle{
border: 2px solid red;
width: 200px;
height: 200px;
border-radius:100%;
background-image: url('')
}
check the fiddle
Related
I'm trying to position two images on top of each other with some level of precison.
The problem is, the top image (the circle) goes all over the place.
Both images are in a responsive grid and the base image is supposed to be centered all the time.
Let's say that, for example, I'm trying to target the hip.
Whenever I shrink the page, the right image goes below (which is exactly what I want), while the circle goes somewhere else (in this case, the hand).
Here's my code:
/* No-margins Class Rules */
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters>[class^="col-"],
.row.no-gutters>[class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
/* Centers content */
.centered-img {
display: flex;
align-items: center;
justify-content: center;
min-width: 100px;
}
.img-container {
background-color: yellow;
position: relative;
width: 100%;
height: 100%;
display: flex;
}
.test {
position: absolute;
transform: translate(-50%, -50%);
left: 100px;
}
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
</head>
<body>
<div class="container">
<!-- global canvas -->
<div class="row no-gutters">
<div class="col-sm">
<div class="centered-img">
<img src="./images/fssFront.png" class="img-fluid" alt="Responsive image">
<img src="./images/circle.png" class="test" alt="Responsive image">
</div>
</div>
<div class="col-sm">
<div class="centered-img">
<img src="./images/fssBack.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<!-- global canvas -->
</body>
</html>
How can I position the red circle on top of the man so it always stays on the same place whenever I stretch or shrink the page?
Thank you very much in advance.
I'm guessing that your two images are using different reference points to determine their location. Additionally, for it to be responsive you need everything in percentages.
The first part. By setting position:absolute on your circle, you're changing it's reference point to the next container up that has position:relative or position:absolute set on it. In your case there are none, so it's using the page, the entire document, as its reference point. If the circle has a reference point of the page, and the image has a reference point of its parent, when you resize, they are going to anchor to different points and you'll never get them lined up.
Additionally, since you want it to be responsive, all of your measurements will need to be in %. left:100px is set on your circle, which won't work when you start to resize. You need to either get the exact location with the transform property, or change your left property to a percentage.
Its been so frustrating with CSS, I have really hard time figuring how to do this.
Let me explain what exactly I am trying to achieve. I am using wordpress and have a div in which I am trying to vertically align both multiple lines of text and image, so that text becomes centered to image. Image is responsive, as well as div size is dynamic. I have tried with fixed width and height for image and text, using display:table and display:table-cell
The issue is the image is getting scaled to 4times its uploaded size
HTML
<div class="image">
<img class="size-full wp-image-12291 alignleft"src="http://example.com/wp-content/uploads/2013/10/terminal1.png" />
<p>I want to get it centered</p>
</div>
CSS
.image {
display:table;
padding-top: 50px;
padding-bottom: 50px;
position: relative;
margin-bottom: 10px;
}
.image:after {
content: '';
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: -25px;
}
p {
display:table-cell;
height:100%;
vertical-align:middle;
}
img {
display:table-cell;
width:100%;
height:auto;
vertical-align:middle;
}
The problem is it is scaling the image to 4 times its uploaded size.
I have used display-table with fixed height and width for image and text block, it worked well. I am trying to work it out for responsive images.
Is there a reason, that this is happening because of wordpress, because, when you upload image to wordpress, it has an option for image size class as medium and large. The large image size is being taken as the class, if you notice in the HTML. Is this happening as I am specifying 100%.
you are almost there, what you tried with display: table-cell is exactly what you need. Just don't use it on your image but on an surrounding element instead. So your image stays the same size. right now you use width: 100%, that scales your image.
<div class="image">
<div class="row">
<div class="cell">
<img class="size-full wp-image-12291 alignleft"src="https://www.google.de/images/srpr/logo11w.png" />
</div>
<p class="cell">I want to get it centered</p>
</div>
</div>
See the fiddle here: http://jsfiddle.net/GHVKM/1/
I have this piece of HTML code:
<div>
<div>
<image src="image-inside-pic-png.png" alt="">
</div>
<image src="pic.png" alt="" />
</div>
The pic.png (300x300 px) is the main image. I would like to put the image-inside-pic-png.png (20x20 px) inside of it. When I apply position: absolute; on the small image, it works only momentarily.
If I change the size of either, it no longer works.
So my question is, how can I move the small image always in the big image - and this small image will be always 15px from the top and 30px from the right margin of the big image?
Thank you for help
I think this should work:
HTML:
<div>
<img src="image-inside-pic-png.png" alt="" class="inner-image"/>
<img src="pic.png" alt="" />
</div>
CSS:
div {
position: relative;
}
.inner-image {
position: absolute;
top: 15px;
right: 30px;
}
Anyway, make sure you need to do this with HTML. Maybe it's better to simply edit the image with Photoshop or Gimp. Or maybe one image it's only for styling purpose, then you should use CSS.
Without changing your markup this can be achieved e.g. using display:inline-block to the outermost div element (so it won't extend for 100% of the available width) and position relative + absolute for outermost div and thumbnail
see this fiddle: http://jsfiddle.net/cRqhT/3/
border and image size are defined for simplicity
put both images in one div which uses position:relatvie, then apply position:absolute to images, and adjust the value as you need.
**html**
<div class="images">
<img src="./images/Rectangle.png" alt="bg"/>
<img src="./images/lady.png" alt="lady" class="lady-image"/>
</div>
**css**
.images {
position: relative;
}
.lady-image {
position: absolute;
top: 0;
right: 0;
}
On my homepage I have a slideshow of pictures that are user selectable. I don't want the user to have to modify the image at all.
http://homespun-at-heart.com/ is the example except that the way that it currently is, the user has to modify the image.
What I would like to do is to have a div that is layered on top of the image so that it appears like the content area has a round corner.
How do I position my "round corner" div on top of the image without it pushing the image over?
well you could achieve this with the css3 border-radius property on a div on top, but it's not supported in all browsers. For an image based solution, something like:
html
<div id="container">
<div id="image"><img src="blah.jpg" /></div>
<div id="round">
<img id="topLeftRound" src="leftRound.png" />
<img id="bottomRightRound" src="rightRound.png" />
</div>
</div>
css
#container{
position:relative
}
#image{
position:absolute;
top:0;left:0;
height:100%;
z-index:10;
}
#round{
position:absolute;
top:0;left:0;
height:100%;
z-index:20;
}
#topLeftRound{
position:absolute;
width:10px;height:10px /* or whatever */
top:0;left:0;
}
#bottomRightRound{
position:absolute;
width:10px;height:10px /* or whatever */
bottom:0;right:0;
}
I'm assuming you can guess what you want your topLeft and bottomRight image to be... Just the rounded section of that corner.
I think that's what you're looking for?
You could simply have two divs, one inside the other, both the same width and height. The bottom one is used for the actual photo, i.e. it's background-image will be the photo. And the top one has a background image with transparancy, which is just the 2 rounded corners:
<div id="slideshow"><div id="slideshow_border"></div></div>
Or (perhaps even better), you could have the outside div with the image as a background, then two divs inside, one floated to the left and one to the right, each with a seperate transparant border image. This means that person browsing your website won't need to download the extra transparant pixels that aren't necessary.
<div id="slideshow">
<div class="border left"></div>
<div class="border right"></div>
</div>
And the CSS:
#slideshow {
width: 400px; height: 400px;
background-image: url(images/slideshow1.png);
}
#slideshow .border {
width: 50px; height: 50px;
}
#slideshow .border.left {
float: left;
background-image: url(images/border-left.gif);
}
#slideshow .border.right {
float: right;
margin-top: 350px;
background-image: url(images/border-right.gif);
}
I just used arbitrary values in the CSS.
Do you use jquery on your site? If you do, you can use this plug-in to generate round corners on dom elements : www.jquery.malsup.com/corner/ or this one: www.dillerdesign.com/experiment/DD_roundies/. Both work very well and support all browsers including IE6. To detect IE6 if needed you can use this plug in http://api.jquery.com/jQuery.browser/.
You could do this very easily with CSS3's border-radius property, and you don't need an overlay div or anything. It won't work in IE8 and below, but it works in Webkit and Firefox.
#slideshow img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
I'm a beginner at rails programming, attempting to show many images on a page. Some images are to lay on top of others. To make it simple, say I want a blue square, with a red square in the upper right corner of the blue square (but not tight in the corner). I am trying to avoid compositing (with ImageMagick and similar) due to performance issues.
I just want to position overlapping images relative to one another.
As a more difficult example, imagine an odometer placed inside a larger image. For six digits, I would need to composite a million different images, or do it all on the fly, where all that is needed is to place the six images on top of the other one.
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>
As the simplest solution. That is:
Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.
This is a barebones look at what I've done to float one image over another.
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}
<img class="imgA1" src="https://via.placeholder.com/200/333333">
<img class="imgB1" src="https://via.placeholder.com/100">
Source
Here's code that may give you ideas:
<style>
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>
JSFiddle
I suspect that Espo's solution may be inconvenient because it requires you to position both images absolutely. You may want the first one to position itself in the flow.
Usually, there is a natural way to do that is CSS. You put position: relative on the container element, and then absolutely position children inside it. Unfortunately, you cannot put one image inside another. That's why I needed container div. Notice that I made it a float to make it autofit to its contents. Making it display: inline-block should theoretically work as well, but browser support is poor there.
EDIT: I deleted size attributes from the images to illustrate my point better. If you want the container image to have its default sizes and you don't know the size beforehand, you cannot use the background trick. If you do, it is a better way to go.
One issue I noticed that could cause errors is that in rrichter's answer, the code below:
<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
should include the px units within the style eg.
<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
Other than that, the answer worked fine. Thanks.
You can absolutely position pseudo elements relative to their parent element.
This gives you two extra layers to play with for every element - so positioning one image on top of another becomes easy - with minimal and semantic markup (no empty divs etc).
markup:
<div class="overlap"></div>
css:
.overlap
{
width: 100px;
height: 100px;
position: relative;
background-color: blue;
}
.overlap:after
{
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 5px;
left: 5px;
background-color: red;
}
Here's a LIVE DEMO
It may be a little late but for this you can do:
HTML
<!-- html -->
<div class="images-wrapper">
<img src="images/1" alt="image 1" />
<img src="images/2" alt="image 2" />
<img src="images/3" alt="image 3" />
<img src="images/4" alt="image 4" />
</div>
SASS
// In _extra.scss
$maxImagesNumber: 5;
.images-wrapper {
img {
position: absolute;
padding: 5px;
border: solid black 1px;
}
#for $i from $maxImagesNumber through 1 {
:nth-child(#{ $i }) {
z-index: #{ $maxImagesNumber - ($i - 1) };
left: #{ ($i - 1) * 30 }px;
}
}
}
Inline style only for clarity here. Use a real CSS stylesheet.
<!-- First, your background image is a DIV with a background
image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
<!-- Second, create a placeholder div to assist in positioning
the other images. This is relative to the background div. -->
<div style="position: relative; left: 0; top: 0;">
<!-- Now you can place your IMG tags, and position them relative
to the container we just made -->
<img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
</div>
</div>
The easy way to do it is to use background-image then just put an <img> in that element.
The other way to do is using css layers. There is a ton a resources available to help you with this, just search for css layers.
You could use CSS-Grid, which is a very convenient solution if you want to stack, overlap content. First you need to define your grid. Inside that grid, you "tell" your img-tags where to be places within that grid. If you define them to be at the same start of the grid, they will be overlapped. In the following example two images are overlapped, one is below them.
<div style="display: grid; grid-template-columns: [first-col] 100%; grid-template-rows: [first-row] 300px">
<img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
<img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
<img src="https://fakeimg.pl/300/">
</div>
You can find a very good explanation of CSS-Grid here.
Set background-size cover. Then wrap your div with another div now set max-width on parent div.
<div style="max-width:100px">
<div style="background-image:url('/image.png'); background-size: cover; height:100px; width:100px; "></div>
</div>
Here is a solution that worked for me. Assuming all the images to be stacked are inside a div container, all you need to do is to set the display property of the div to flex. Don't set any position for the first image but for every other image, set the position property to absolute. Finally, use z-index to control the layers. You can set the first image's z-index to 1, the second image's z-index to 2, and so on (In my own case, I set the z-index of every other image apart from the first image to 2). If you want to center the images, you can set the justify-content property of the div to center to align the images horizontally to the center and adjust the top property to align the images vertically to the center. The values you use for the justify-content and top properties depend on the size of your images and whether the sizes are responsive on different devices or not.
Here's my example:
img {
border: 2px solid red;
}
.img1n2 {
display: flex;
justify-content:center;
}
.img1 {
z-index: 1;
}
.img2 {
position: absolute;
z-index: 2;
top: 52.5%;
}
<div class="img1n2">
<img class="img1" src="https://fakeimg.pl/400/">
<img class="img2" src="https://fakeimg.pl/300/" width="100">
<img class="img2" src="https://fakeimg.pl/200/" width="50">
<img class="img2" src="https://fakeimg.pl/50/" width="30">
</div>
You can actually stack a thousand or a million images with this method. You can play around with the CSS to suit your specific needs. Happy coding!
#buti-oxa: Not to be pedantic, but your code is invalid. The HTML width and height attributes do not allow for units; you're likely thinking of the CSS width: and height: properties. You should also provide a content-type (text/css; see Espo's code) with the <style> tag.
<style type="text/css">
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>
Leaving px; in the width and height attributes might cause a rendering engine to balk.
Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.