What is the best way to superimpose two images together?

I'm attempting to create an image overlay effect where one image is placed on top of another, similar to the screenshot provided. Check out the screenshot here

However, I'm facing an issue where the overlaying image remains stationary when the screen size changes. I want it to maintain its position relative to the background image no matter what. I've tried adjusting the positions and widths of both images and their container, but haven't been successful in achieving the desired result.

.img-container {
  position: relative;
  width: 800px;
  /* Set to the size of your background image */
  height: auto;
}

.background-img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  /* Background image stays behind */
}

.overlay-img {
  position: absolute;
  top: 10rem;
  /* Adjust the position of the overlay image */
  left: 45rem;
  max-width: 100%;
  /* Set size of the overlay image */
  z-index: 2;
  /* Overlay image appears on top */
}
<section id="portfolio">
  <div class="img-container">
    <img class="background-img" src="https://picsum.photos/1000/1000">
    <img class="overlay-img" src="https://picsum.photos/200/300" alt="">
  </div>
</section>

cssimagecss-positionoverlay

Answer №1

Instead of relying on top: 10rem; left: 45rem;, an alternative approach is to utilize bottom and right properties for positioning the image at the bottom right corner of the background image.

.img-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: auto;
}

.background-img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay-img {
  position: absolute;
  bottom: 10px;
  right: 10px;
  max-width: 100%;
  z-index: 2;
}
<section id="portfolio">
  <div class="img-container">
    <img class="background-img" src="https://picsum.photos/1000/1000">
    <img class="overlay-img" src="https://picsum.photos/200/300" alt="">
  </div>
</section>

Furthermore, irrespective of resizing the window, the overlay image will adjust accordingly.

Update:

If your intention is to superimpose the overlay image on top of the background image like demonstrated in the screenshot, a similar technique can be applied.

.img-container {
  position: relative;
  width: 100%;
  max-width: 50vw;
  height: auto;
}

.background-img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  z-index: 2;
}
<section id="portfolio">
  <div class="img-container">
    <img class="background-img" src="https://picsum.photos/1000/1000">
    <img class="overlay-img" src="https://picsum.photos/1000/1000" alt="">
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Internet Explorer 11 fails to interpret the attribute attr.xlink:href

I am a beginner in Angular 2 and I'm working on creating an icon component. The code I have below works perfectly in Chrome and Firefox, but unfortunately, it's not functioning in Internet Explorer 11. Here is what my component looks like: @Com ...

csshtmlsvgangular

Are there specific mappings for system colors in CSS across various browsers and operating systems?

The CSS specification outlines a variety of built-in system colors that can be utilized, such as Highlight and Background. Is there a correlation between these built-ins and the settings of different OS/Browsers? For instance, if I implement color: Highl ...

csscolors

Can information be transferred to a CSS document?

Currently working on developing a content management system (CMS) using PHP and exploring the possibility of passing a URL to an image. In my PHP pages, I am utilizing Twig templates and the {{ image1url }} to display the image URL. Is there a way to pas ...

phphtmlcsssymfony

Adjusting the transparency of my banner background image using Bootstrap 4

How can I make the background image transparent without affecting other elements like the navigation menu and main text? After researching online, I discovered that overlaying with a white image of the same size could be the solution. However, when attem ...

htmlcssbootstrap-4

(PHP) The resizing of the image was unsuccessful

I am encountering the same error while attempting to resize an image: Warning: imagecreatefromjpeg(): gd-jpeg: JPEG library reports unrecoverable error: in /Applications/XAMPP/xamppfiles/htdocs/dad/gallery.php on line 18 Warning: imagecreatefromjpeg() ...

phpimageresize

Extract the entire div including all its elements and then transmit it using the PHP mail function

Currently, I am developing a feature that allows users to send an email. The email should include only one div from the page which contains elements added using the jQuery drag and clone function. I am unsure how to copy the entire div along with its child ...

phpjavascriptjqueryhtmlcss

What is the best way to ensure your background image appears proportional?

I'm having an issue with the background image on my login page - it doesn't look like the original photo: Take a look at the screenshot to see the problem with the width of the image: https://i.sstatic.net/qb9u0.jpg Here's the HTML/jsx cod ...

htmlcssreactjssass

Error: The @use directive must come before any other rules in Angular

Error message: Issue: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error Details: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) ...

cssangulartypescriptsass

resembling the nth-child selection for even elements within a list wrapped in <ul> tags

I recently utilized ng-repeat to iterate over a ul element. Unfortunately, I've run into an issue where I can't simply use nth-child(even) to change the background color of every other ul element. Does anyone have any alternative solutions or s ...

htmlcssangularjs

A creative CSS technique to eliminate borders from ul elements without relying on the calc() function

I'm currently using the top bar component from Zurb Foundation and have added a 1px border at the top and a 3px border at the bottom of the nav tag. However, I am facing height issues because the ul menu inside is set to 100% height. What would be th ...

htmlcsszurb-foundation

Ways to relocate the menu within the confines of the "menu border"

Is it possible to move the menu inside the border on this webpage? I am new to web design and was thinking of using position:absolute for the links. Should I also move the submenu along with it? Any suggestions on how to achieve this? Thank you! The goal ...

htmlcssmenuposition

Having difficulty aligning block element in the center horizontally

I am struggling with centering elements for a list of upcoming blog posts. The Postlist component is integrated into my App.js file. Although I successfully centered the navigation bar following the method described here in the Horizontally section and spe ...

cssreactjs

Problem with CSS creating the Typewriter effect when the third line of text is added

I've been working on a website for my new company and I want to incorporate a typewriter effect on the main page. I came across a tutorial on Medium.com but I'm having trouble adding an additional span to the provided code. Take a look at the lin ...

htmlcss

Ways to resolve the issue of a website displaying with extra whitespace at the bottom

Seeking assistance to resolve the issue with a blank space at the bottom of the web page. Refer to: http://www.khohanghoa.com I have dedicated the entire day to search for a solution and attempted to fix the problem. I have attempted to configure the CS ...

javascriptphphtmlcsswordpress

Tips for showing a value in an input text box

Imagine you have a select tag with multiple options. You want to display a specific value in the input field below when a user selects one of the options. <select name="cars" id="cars"> <option value="volvo">Volvo-100</option> < ...

javascripthtmlcss

Comparing transition effects: scale, transform, and all

My goal is to apply transition effects to specific transform functions in CSS, such as scale(), while excluding others like translate(). Initially, I attempted the following code snippet: input:focus + label, input:not(:placeholder-shown) + label { tran ...

csscss-transitionscss-transforms

Is there a way to permanently position the carousel-caption in bootstrap4?

Looking for a solution to keep the carousel caption fixed when changing carousel images and to use a nav-tab in conjunction with the carousel. Is there a way to achieve this or a method to fix the nav-tab on the carousel? Thank you! ...

htmlcssbootstrap-4

Using CSS to create a hover effect on a button that shows multiple links

I have a button in my navigation bar that I want to enhance with hover functionality. When a user hovers over the button, I want the text on the button to disappear and reveal three different clickable links inside the button. The actual button itself sh ...

htmlcss

The battle between nested flexbox heights and max-heights

Note: I am observing some unusual behavior on Chrome 72. FireFox 64 seems to be working fine! I am experiencing an issue with a nested flexbox. In the code snippet below, I have added an artificial XL height to .root.container in order to achieve the des ...

htmlcssgoogle-chromefirefoxflexbox

Troubleshooting a Label Overlapping Problem in Materialize CSS

I've been working on a Materialize project and encountering an issue with pre-filled values in text boxes. Here is a snapshot of the problem: https://i.stack.imgur.com/u13jT.png <div class="input-field col s12 m6"> <input class="" id="us ...

htmlcssmaterialize