How to superimpose an image onto another image using HTML and Bootstrap 4

I am trying to superimpose one image on top of another image and adjust its pixel location. After doing some research online, I came up with the following code snippet:

.background {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(440px, 340px);
  z-index: 2;
}
<div class="container-fluid">
  <div class="row" style="margin-top:10px;">
    <div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10  " id="test">
      <img src="static/overlay.png" id="image_master" class="background" style="border: 4px solid lightgrey;">
      <img src="static/overlay.png" id="overlay2" class="overlay">
    </div>

While this code achieves the desired result, the issue arises when the page is resized, causing the overlay image to move outside of the background image. I am looking for a way to maintain the proportion between them despite resizing.

javascripthtmlcssbootstrap-4

Answer №1

Solution for Image Overlay Responsiveness

The issue with the image overlay not being responsive is due to the fixed value translate(440px, 340px) set for transform, which applies to all devices uniformly.

Fixing the Problem

To rectify this, implement media queries (@media) tailored for different viewports and devices.

Alternatively, position the overlay-image absolutely in relation to its container #test. This technique has been used successfully to resolve the responsiveness concern. You can check out the working demonstration on the provided link below:

Link: https://jsfiddle.net/Baliga/fme12tby/22/

Answer №2

I hope this information proves to be useful.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .image-container {
            position: relative;
            display: inline-block;  
        }
        .image-overlay {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="image-container">
      <img class="image-content"  src="https://images.pexels.com/photos/1532771/pexels-photo-1532771.jpeg?auto=compress&cs=tinysrgb&h=350">
      <img class="image-overlay" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=350">
    </div>
</body>

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

The dimensions of HTML elements can vary when viewed in browser developer tools versus retrieving their size using JavaScript

In my Javascript file, I have implemented various methods to determine the height of a fixed header on my website and use that value as padding for the main content. However, I am encountering inconsistencies in the results obtained through different metho ...

javascriptjquerywordpress

Manipulating and transforming data through Puppeteer's iterative process into an object structure

As a beginner with the puppetteer library, I'm trying to iterate through Amazon reviews and save each comment as an object. Although my code seems to be functioning, it only retrieves the first comment and then stops. async function scrapeProduct(ur ...

javascriptnode.jsjavascript-objectspuppeteer

Does anyone have an idea of the origin of the item in this ajax .each function?

Currently, I am utilizing the Etsy API with JavaScript by calling this AJAX code: $.ajax({ url: etsyURL, dataType: 'jsonp', success: function(data) { This code returns an object array, if I'm not mistaken. It then proceeds to enter this . ...

javascriptjqueryajax

Error: $controller does not function as a controller within another controller

I recently started learning Angular JS and attempted to call one controller within another, but encountered the following error: ionic.bundle.js:21157 TypeError: $controller is not a function at new <anonymous> (http://localhost:8080/itravel/www/js/ ...

javascriptangularjsdependency-injectionangularjs-scopeangularjs-controller

Is there a way to continuously click on a button 99 times or until the code finishes running?

Need Assistance, Please Assist. I am encountering an issue where I have the same type of skip button with identical name and id properties for all products, but only the xpath changes. Can you provide guidance on how to efficiently click on 99 similar ski ...

javascripthtmlseleniumtestingselenium-webdriver

I'm having trouble with my react-big-calendar not updating when I switch between day, month, or week views -

Why won't my calendar change to the week view when I click on that section? https://i.stack.imgur.com/gh2aO.png In the screenshot above, my default view is set to month, but when I attempt to switch to week, it only highlights the option without cha ...

javascriptnext.jsreact-big-calendar

Why are there no borders around the rows and columns of my table?

I'm just starting to learn HTML so I appreciate your patience with what may be a basic question for some. After creating a table using , I've noticed that there are no visible lines separating the cells. Is there a way to add lines around the ce ...

html

Is there a way to configure a Mui textfield to only allow numeric input? It currently accepts numbers, the letter "e," and dashes

Take a look at my current code. <TextField error={values[1].error} fullWidth id="id" type="number" value={values[1].Id} placeholder='Enter ID' onChange={handleChange(1,'Id')} variant="outlined" inputProps={{min: 0,inputMode: &apos ...

javascriptreactjsmaterial-ui

Differences in Angular 2 Performance: Analyzing AOT and JIT Payloads

I'm still getting the hang of Angular 2, so feel free to correct me if I'm off base. Comparing Angular 1 and 2 in terms of the compiler: In Angular 1, the compiler is more general and dynamic, meaning that a single code is used for dirty checki ...

javascriptangularjsangularjitaot

Multer failing to generate file during request process

My current setup involves a router and multer middleware, but I'm facing an issue where the file requested is not being created. As a result, req.file always remains undefined. const multer = require('multer'); let storage = multe ...

javascriptnode.jsexpressmulterbody-parser

JavaScript Time Counter: Keeping Track of Time Dynamically

Currently, I am attempting to create a dynamic time counter/timer using JavaScript. Why dynamic? Well, my goal is to have the ability to display days/hours/minutes/seconds depending on the size of the timestamp provided. If the timestamp is less than a d ...

javascripthtmltimer

Authentication using tokens - JSON Web Tokens

While working with jsonwebtoken in Node, we generate a unique token for each user and return it to them. But when the user sends this token in the authentication header (Authentication: <token>), how does jwt differentiate between tokens from diffe ...

javascriptnode.jsexpressjwt

Is there a way to have an image expand to fit the entire screen before scrolling to view another image?

I'm working on a website and I want to have an image that automatically adjusts to fit any screen size. Users should be able to scroll down to see more content or another image. A similar effect can be seen on this site: . Any suggestions would be rea ...

css

Attempting to configure Kafka consumer and producer components

Trying to establish a basic producer-consumer flow with Kafka, utilizing node-rdkafka Operating in debug: 'all' mode, the logs display: Producer: test [0]: MessageSet with 1 message(s) delivered Consumer: Fetch topic test [0] at offset 38 (v2) ...

javascriptnode.jsapache-kafkakafka-consumer-apikafka-producer-api

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. https://i.sstatic.n ...

javascriptcssreactjsmaterial-uinext.js

Typescript's array of functions

In my code, I currently have an engage(ability: number, opponent: Creature) function that is responsible for executing one of three different attacks based on the ability chosen. strike(opponent: Creature){} claw(opponent: Creature){} fireball(opponent: C ...

javascripttypescript

Achieve a stylish masonry layout using Bootstrap 4

I am looking to achieve a specific layout (refer to the image link below): https://i.sstatic.net/U6xa2.png Main requirements: The blocks should seamlessly "merge" together like in a masonry layout, without any margins in between One block needs to be d ...

twitter-bootstrapbootstrap-4masonry

Is it better to use <div><a /></div> over <button />?

I've recently taken over the maintenance and upgrade of an existing website. One interesting aspect of the site is how it handles buttons. The html code for buttons looks like this: <div class="btn"> <a id="dv_remCont" runat="server" h ...

htmlcss

Changing the Javascript Date Object into JSON date format

I'm in the process of converting a timestamp generated by var now = new Date().getTime(); which results in the timestamp 1349916512100. I am looking to format the date as \/Date(1349916512100)\/ in order to incorporate it into a JSON st ...

javascriptjsondate

The parsererror occurred while executing the jQuery.ajax() function

When attempting to retrieve JSON data from using the following code: (Using jQuery 1.6.2) $.ajax({ type: "GET", url: url, dataType: "jsonp", success: function (result) { alert("SUCCESS!!!"); }, error: function (xhr, ajaxO ...

javascriptjqueryjsonparse-error