Overlay two images onto a background image with exact placement

My web page contains 3 images. The first one serves as a background image and determines the size of the enclosing div (img {width: 100% height:auto). This allows me to resize the div dynamically while maintaining the aspect ratio of the image.

https://i.sstatic.net/NcGKZ.png

The other two images, when combined, match the dimensions of the background image. These images are mostly transparent except for the black circular profile images:

https://i.sstatic.net/OxNsX.png

I'm struggling to position these two images over the background image in a fixed manner. I want them to remain on top of the background image so that when the window is resized, they resize alongside it while maintaining their position on top (shrinking proportionally with the background image). I'm aiming for this final result:

https://i.sstatic.net/sZR1l.png

If anyone could provide guidance or help with achieving this effect, I would greatly appreciate it. Thank you in advance!

function openLink(evt, animName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("information");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(animName).style.display = "block";
}
@font-face {
  font-family: "walkway oblique ultraBold";
  src: url("https://cdn.shopify.com/s/files/1/0019/0909/6500/files/Walkway_Oblique_UltraBold.woff?8124544898226561589") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Rest of CSS code omitted for brevity */

</div>

javascripthtmlcss

Answer №1

Adjust the positioning of #image-left and #image-right (not the img) by using position:absolute and setting the width to 50% (one on the left, one on the right)

Add the following CSS:

#image-left, #image-right{
  position:absolute;
  top:0;
  width:50%;
}
#image-left{left:0;}
#image-right{right:0;}

Remove this CSS:

#image-left img {
  left: 0;
  top: 0;
}

#image-right img {
  right: 0;
  top:0;
}

Here is a working demo:

function openLink(evt, animName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("information");
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  document.getElementById(animName).style.display = "block";
  
}
...

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

Generating a compilation from an array in React JS

Having trouble creating an array to store my category links and display them on my website. However, I'm not seeing anything in my DOM. Any assistance would be greatly appreciated :) import React from "react"; import { SidebarCategory } from './ ...

javascriptarraysreactjs

Changing the values of an array to strings using javascript

I am trying to work with an array that contains elements [ABC, QWE, XYZ]. How can I convert it to ['ABC', 'QWE', 'XYZ']? When attempting to manipulate values within the current array, I encounter the following error: Referenc ...

javascriptarraysstring

pull information from mongodb into angular

I am attempting to retrieve data from MongoDB, but I keep seeing [object] [object]. How can I transfer array data from MongoDB to Angular? Here is the code snippet: import { Component, OnInit } from '@angular/core'; import {HttpClient} from &quo ...

htmlarraysangularmongodb

utilizing a media query specifically for tablets and desktops

I'm currently experimenting with the NOT operator in media queries here's an example of what I'm trying to achieve: .media{ @media screen and not (max-width: 600px){ display: flex; flex-direction: row; align-item ...

cssmedia-queries

Whenever I try to make my links responsive, they don't seem to work as intended

This is the HTML snippet <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> ...

htmlcssbootstrap-4

Managing single sign-out with SSO using the Msal v2 library in a Node.js and Vue.js environment

The challenge: When using msal v2, logging in to the app via a Microsoft account saves parameters to the sessionStorage. Everything works perfectly until the user logs out on Office.com or any other site using Microsoft SSO. The problem arises because the ...

javascriptnode.jsvue.jsmicrosoft-graph-apiazure-ad-msal

Consistent design elements shared among various Angular components

I am faced with a scenario where I have around 6 components in HTML that share the same styling, such as: <headertag>Some Content</headertag> <headertag>Some subtitle</headertag> Here there might be different content or svg/img or ...

htmlcssangularsassscss-mixins

Navigating a targeted key-value pair within an array: Step-by-step instructions

Currently, I am dealing with a JSON object that contains over 250 arrays. Each array holds data related to various countries such as population, language, and currency. My objective is to extract a specific key-value pair (country code) from each array and ...

javascriptarraysjsoniterationkey-value

Download multiple Highcharts graphs on a single page

When using Highchart Export, I am currently able to download multiple graphs in a single page PDF. However, I would like the first graph to be on the first page and the second graph on the second page when saving as a PDF. You can find the code in the fol ...

javascriptjqueryangularjschartshighcharts

Bypassing reCaptcha V2 in C# Selenium without relying on callback functions

Recently, I have been utilizing the 2captcha.com API to bypass reCaptcha V2. However, I seem to be encountering an issue with implementing the callback function. Every time I try to run the callback function, nothing seems to happen and the output is alway ...

javascriptc#seleniumrecaptcha

Guide to utilizing geolocation to determine a visitor's location, specifically their country

I am exploring ways to enhance the native geolocation function if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude ...

javascriptgeolocation

What are some strategies for boosting the efficiency of a recursive element in React?

Within my React Native Expo project, I've implemented a recursive comment component to facilitate the rendering of nested comment threads. However, as the number of comments grows, performance begins to suffer, resulting in a less-than-ideal user exp ...

javascriptreactjsreact-native

Unable to properly position an element with the correct margin

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, l ...

htmlcssmargin

Show occurrences of an array categorized by date using JSON format

I'm interested in analyzing a JSON array to find the occurrences of a specific item by date. Let me demonstrate with the following JSON example: "data": [ { "tags": [ "foo", "bar", "hello", "world", " ...

javascriptarraysjsondate

Email signature becomes distorted when replying to messages

I am encountering an issue with my email signature that is causing it to become distorted when replying in Outlook. The problem arises when I send an email with the signature from Outlook 2016 on Mac to Outlook 2007 on Windows – initially, everything lo ...

htmlcssemailoutlooksignature

The Express server powered by Node.js is failing to send responses back to HTTP requests initiated from a JavaScript file, despite successfully receiving and processing the requests

I am facing an issue with my setup where I have both a node-js server and an apache server running on the same machine. One of my javascript files is sending an HTTP request to the node-js server, which receives the file, reads the data, and puts it in the ...

javascriptnode.jsexpressxmlhttprequest

What is the best way to expand and collapse a mat-expansion-panel using a button click

Is it possible to expand a specific mat-expansion-panel by clicking an external button? I've attempted linking to the ID of the panel, but haven't had any luck... <mat-expansion-panel id="panel1"> ... </> ... <button (click)="doc ...

htmlangularangular-material

Creating a Future Prediction Graph with ECharts

I am looking to create a forecast chart that includes both Actual values (presented as a line chart) and projected values (displayed as a dotted chart). An example of what I have in mind can be seen here, created using Excel: https://i.sstatic.net/q18An.pn ...

javascriptecharts

Submitting a form using Ajax to a Node.js backend

Just beginning my journey with node.js, I am faced with a challenge - submitting a form and passing the data through Ajax to be processed on the Node backend. The goal is to send the processed data back and display it on index.html. However, the initial hu ...

javascripthtmlnode.jsajaxforms

Tips on invoking a class method within lodash debounce function

Help needed: Issue with TypeError - Expected a function at debounce when calling a class method in the lodash debounce class Foo { bar() { console.log('bar'); } } const foo = new Foo(); _.debounce = debounce(foo.bar(), 300); ...

javascript