HTML Image Overlay Positioning

how to place an image over another image in html
css overlay image over image
image overlay css
background image overlay css
html image over image
css overlay background transparent
css transparent overlay
css overlay image over another image

I'm working on a group project for school that is due on the 17th. I'm trying to get an image perfectly centered over another image. I think I essentially got this figured out a couple days ago, but now that I'm working on it on my home computer, the alignment is all screwed up. I need help getting the images centered in the middle of the screen horizontally, and have the top image centered in the middle of the back image. Here's a screenshot, the code, and a link to just the specific code.

Thanks in advance!

HTML Image Code:

<div class="flagpart">
  <article id="flag2">
  <div id="backimg"></div>
  <img src="flag.png" class="flag">
  </article>
</div>

CSS Image Code:

#backimg {
background-image: url(flag.png);
background-repeat: no-repeat;
background-size: contain;
height: 750px;
background-clip: padding-box;
margin:0 auto;
text-align: center;
  filter: blur(5px);
z-index: 1;
}

.flag {
  width: 50%;
  height: 50%;
  display:inline-block;
  text-align: center;
  margin: -42.5% 0% 0% -25%;
  z-index: 2;
  position: absolute;
}
#flag2 {


}
.flagpart {

text-align: center;

}

backimg is the blurred background image, flagpart contains both images, flag2 is another container, and flag is the top image.

Website link: https://cooking-light-3.spencerleagra.repl.co/recipe2.html

Link to the code: Link Here

Also, if anyone has any suggestions overall on how to make the site look better, please, do feel free to say so.

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>

Positioning and overlaying image on another image, How To Create an Overlay Image Title. Step 1) Add HTML: Example. <div class=" container"> /* Container needed to position the overlay. Adjust the width as needed */.container { position: relative; width: 50%; max-width: 300px;} /* Make the image to responsive */.image { display: block; width: 100%; height: auto;} /* The overlay effect - lays on top of the container and over the image */.overlay { position: absolute; bottom: 0;

You can put the img tag inside the div with the larger image. Set the larger div to position: relative and the img to position: absolute so the smaller image uses the larger one has a guide.

html:

<div class="flagpart">
  <article id="flag2">
    <div id="backimg">
      <img src="flag.png" class="flag">
    </div>
  </article>
</div>

css:

#backimg {
  position: relative;
}
#backimg img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Because the parent of img is set to position relative; and img is position absolute;, the smaller image uses its parent as a guide. top: 50%; and left: 50%; set the top left corner of the smaller img at the centre of the larger image, and transform: translate(-50%, -50%); moves half of the width and height of the smaller image top the left and up, to position it at the exact centre. Here's a picture from victorw999 that illustrates this:

How To Create an Image Overlay Icon, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� Add a relative div placed in the flow of the page. Set the background image as relative so as the div knows how big it must be. Set the overlay as absolute, which will be relative to the upper-left edge of the first image.

How To Create an Overlay, Important note: The image-overlay container MUST be “positioned” itself (here relative) in order to position its own elements. Original image and� Problem. I'm trying to position an color block/overlay background: rgba(34, 34, 34, 0.73); on top of an image when it is hovered over.. Tried using z-index to push the overlay to the front as it seems to be sitting behind the image, while I have a feeling that my positioning position: relative may be the problem, changing it to position: absolute has made the overlay jump way out of position.

Images and text overlays in HTML/CSS, Use position, top and left Property in CSS to place an overlay image on we will show you how to position an image over image using HTML� 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 .

How to Position Image Over Image using CSS, DOCTYPE html> <html> <head> <style> .container { position: relative; width: 50% ; } .image { display: block; width: 100%; height: auto; } .overlay { position:� How TO - Position Text Over an Image Step 1) Add HTML: Example <div class="container"> <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;"> <div Step 2) Add CSS: Example /* Container holding the image and the text */ .container { position: relative; text-align: W3.CSS Tutorial

How to Overlay Images with CSS, Learn how to create an image overlay title on hover. Step 1) Add HTML: lays on top of the container and over the image */ .overlay { position: absolute; The following HTML-CSS code placing one image on top of another by create a relative div that is placed in the flow of the page. Then place the background image first as relative so that the div knows how big it should be. Next is to place the overlay image as absolutes relative to the upper left of the first image. HTML-CSS Source Code

Comments
  • Please provide a Minimal, Reproducible Example so that we don't have to analyze all of your website code. Edit your post accordingly and we'll be able to help you.
  • @pensum Ok, I've changed it so that the link goes to just the specific code.
  • The only problem I've run into now is that now that I'm using a smaller laptop, the image is too big, and when setting it's width and height to smaller values, it isn't centered.
  • It doesn't work for me, it only shows the the flag img, not the backimg.
  • @FoxGAMING_NTF For the sake of the clarity of the answer, I did not include the other css codes that you had in #backimg. Put the background-image: url(flag.png); and all the other lines back, and you should see the background image.
  • if I add the lines back to #backimg img i only see one blurry image, and if i add it to #backimg and zoom out I see two blurry images.
  • Since .flag is a child of #backimg. If you usefilter: blur(5px); on #backimg, .flag would be blurred too. To work around this, you need to create a transparent div inside #backimg that overlays the #backimg, but has a z-index less than the z-index of .flag, and blur that overlay instead of blurring the entire #backimg. (position absolute, width and height set to 100% and top and left set to 0)