Centering overlapping images while window re-sizes

responsive center image
center image css
center image in div vertically and horizontally
center div horizontally and vertically
position css
css position: absolute center horizontal and vertical
top center css
bootstrap image center

I have 2 images of identical size that need to overlap perfectly and remain overlapped while the window re-sizes. For some reason, setting position: absolute; reverses the centering. Here is the code so far, i've replaced my images with generic ones found on google images.

<img src = "http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif" width = 50%  height = auto style="position: relative; margin-left: auto; margin-right: auto; display: block;">
<img src = "https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png" width = 50% height = auto style = "position: absolute; z-index: 2; top: 50%; margin-left: auto; margin-right: auto; display: block;">

Does anyone know how to fix this? Thanks.

You have to use a container box that contains your two images and add position: relative to that box. Also you can use flex to center the content of the box. Finally add position: absolute to the image you want to overlap. Here is an example:

.container {
  width: 50%;
  display: flex;
  position: relative;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.container img {
  width: 100%;
}

.container img.overlap {
  position: absolute;
}
<div class="container">
  <img src="https://dummyimage.com/300x300/c9c9c9/fff">
  <img class="overlap" src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png">
</div>

How to Create a Responsive CSS Centered Image in CSS3, Learn how to create responsive centered images in CSS3. important check and you're presented with a centered image which is difficult to remove. the viewport and image dimensions then size and center accordingly. @media screen and (orientation: portrait) { img.ri { max-width: 90%; } } @media  Learn how to center an image with CSS. To center an image, set left and right margin to auto and make it into a block element: Note that it cannot be centered if the width is set to 100% (full-width). Tip: Go to our CSS Images Tutorial to learn more about how to style images. Your message has been sent to W3Schools.

I hope this is what u are looking for :)

Note: Please take the time to read https://stackoverflow.com/help/how-to-ask, people here cannot help you if you do not provide any code

html, body {
  height: 100%;
}
div {
  top: 50%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  transform: translateY(-50%);
}
img {
  max-width: 100%;
}
.overlap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
<div>
  <img src="https://via.placeholder.com/300x300">
  <img class="overlap" src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png">
</div>

CSS: centering things, A common task for CSS is to center text or images. A separate example shows a paragraph that is centered vertically in the browser window, because it is vertically without using absolute positioning (which may cause overlapping text) is still under discussion. When the CSS formatter supports 'flex', it's even easier​:. Paint 3D by Microsoft is a free image editing tool. Check out this tutorial to learn how to merge two images in Paint 3D on Windows 10.

You can keep one image as div background and another as content of the div

HTML

.imageCont{background: url('http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif') center no-repeat; width:300px; height:300px;display:flex; align-items:center;justify-content: center;}
<div class="imageCont">
<img src ="https://via.placeholder.com/300x300"/>
</div>

Cocoa Recipes for Mac OS X, should follow in setting the initial position and size of a document window. In summary, the first time a new document window opens, it should be centered horizontally, its top should butt up It should not overlap the Dock. A good way to position the window in the center of the screen when it initially opens is to use the  I would like to answer part of the question which involves elements overlapping. You have displayed logo and title side by side, right. Now if it’s done with [code ]display:inline-block[/code] it will fall off or drop into one line automatically.

Based on the codes provided by you, you can use the code below to achieve the desired output.

<div>
    <img src="http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif" style="position: relative; margin-left: auto; margin-right: auto; display: block;">
    <img src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png" style="position: absolute;top: 0;left: calc(50% - 150px);">
</div>

Considerations for Styling a Modal, It's easier to position the modal when you're dealing with the page-covering body rather This is great for modals, which are typically exactly centered and might have A modal is often accompanied by a full-screen-covering overlay. If it changes size and is centered, the close button will always be in a different place. If you remove the redundant height setting on #panel1 then the divs won’t overlap. If you don’t want the divs to reposition on smaller windows, then sit a minimum width on their container.

Equidistant Objects with CSS, This can be a very useful thing to do, especially in fluid width layouts when Also, at narrow enough browser window sizes, the images will overlap. If all the cells are centered, that allows the objects to be equidistant but then I'm adding this in June 2015 (seven years later!) because it's the best solution (if you're able to  Hello, I am very new to web development in general. I am trying to develop a master page for a tutorial that I am creating. I have tried different solutions to correct the overlap, but the same result occurs every time. My web page shows up fine in IE7 and FF 3.5.7 with my screen resolution at

13 ways to vertical center, Whether we were trying to align an icon or image beside the text, or a modal overlay, centering things in the vertical axis was always a struggle When the element has intrinsic dimensions we might use 0 for top CSS display to table and table-cell will make screen readers interpret it as an actual table)  Table of Contents How Browsers Zoom and Resize Text Avoid Clipped, Truncated, Obscured, and Overlapping Text Avoid Horizontal Scrolling Development Best Practices How Browsers Zoom and Resize Text Users with low vision may prefer to have their browser resize text or zoom into page content to make it easier to read.

A Fix for Outlook Image Issues in HTML Email Campaigns, We don't know for certain how many Outlook users experienced image 3 is a separate issue related to font resizing we recommend fixing while you're at it. set inline to a width="100%" so it adjusts well to various screen sizes, but Outlook We used conditional formatting to insert an additional centered table inside the​  Click where you want to place the image, or click-drag to size the image as you place it. A copy of the image file appears on the page, with the same resolution as the original file. Use the bounding box handles to resize the image, or the tools in the right hand panel under Objects to Flip, Rotate, or Crop the image.

Comments
  • show us the parent element too
  • When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be… stackoverflow.com/help/mcve
  • Thanks! Is there a way I can do this while still specifying the width of the image? adjusting the code to add "width: 50%; height: auto;" undoes- the effect.