What is the best way to responsively scale multiple overlay images in CSS?

I am facing an issue with multiple images overlaid on top of a background in my web design. Here's a sample code snippet that showcases the problem:

<div style="position: relative; left: 0; top: 0;">
    <img src="images/background.png" style="position: relative; top: 0px; left: 0px;"/> 
    <img src="images/overlay1.png" style="position: absolute; top: 20px; left: 20px; "/>
    <img src="images/overlay2.png" style="position: absolute; top: 40px; left: 40px; "/>
</div>

When the browser is in full screen mode, everything appears as intended. However, upon resizing the browser window, only the background image scales proportionally while the overlay images remain static at their original positions. Attempting to change all position attributes to relative messes up the positioning of the overlay images.

I'm seeking advice on how to modify this setup so that all images within the div tag scale correctly relative to each other. Just to provide more context, I am utilizing Twitter Bootstrap 2.3.2 as the default CSS theme.

For additional information, all images have fixed dimensions - for instance, the background is 640x480 positioned at 0, 0. The overlays also have set sizes and are meant to align precisely with the background image. One overlay might be 64x64 positioned at 15, 24 (top, left), while another could be 128x128 placed at 200, 231, and so forth. It's crucial to maintain these specific overlay positions for the overall composition to appear complete.

htmlcsstwitter-bootstrapresponsive-design

Answer №1

If you want to maintain consistent proportions when adjusting the size of your browser window, it is recommended to use percentage values for both the dimensions and positioning of overlays.

In this scenario, all elements are static, so the conversion from pixels to percentages can be achieved using a simple formula:

% value = px value / container px value * 100

For instance, considering Overlay 1 with dimensions (64x64) and position (24,15):

width = 64/640*100 = 10%
top = 15/480*100 = 3.125%
left = 24/640*100 = 3.75%

To implement this, set the overlays as absolutely positioned and assign the calculated values to each property:

.container {
    position:relative;
    width: 100%;
    max-width: 640px;
    line-height: 0;
}

.container img{
    max-width: 100%;
}

.overlay1{
    width: 10%;
    position: absolute;
    top: 3.125%;
    left:3.75%;
}

.overlay2{
    width: 20%;
    position: absolute;
    top: 41.666%;
    left: 36.09%;
}

Explore the Sample fiddle

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

Having trouble with a jQuery.validationEngine reference error?

Despite everything being correctly referenced, I am facing difficulties in getting it to function properly. It's strange because it worked once, but the validation message took 10 seconds to appear. After that, without making any changes, I tried agai ...

javascriptjqueryhtmljquery-plugins

Is there a way to detect when the user closes a tab or browser in HTML?

I am currently developing a web application using the MVC architecture and I need to find a way to detect when a user closes their browser tab so that I can destroy their session. My tech stack includes jsp (html, js) and java. Any suggestions on how to ...

javascriptjavahtmljsp

Using HTML to place an image tag close to an input element

I'm experiencing a strange issue where adding an img tag alongside an input and a span causes the input and span to shift downwards. <div> <span>Credit Points</span> <input type="text" name="credit_points" value="2.25"/> ...

htmlcss

Which element to use for creating a color palette - <img>, <div>, or <canvas>?

I am currently in the process of developing a color-picker component using HTML, CSS, and Javascript. One key question that I have is how to best implement a color palette similar to the one below: Putting aside browser compatibility concerns with IE8 or ...

htmlsemantics

Is it possible to launch an Electron application by clicking a run button in the VSCode

I'm new to using VSCode and am currently working on an HTML5 app with Electron. I'm finding it cumbersome to switch between windows and enter a command each time I want to test my application. Is there a way to configure VSCode to run my Electron ...

javascripthtmlelectron

CSS/HTML - Issue with nested divs not displaying properly

Attached is an image that provides context for the issue I'm facing. https://i.stack.imgur.com/nQXh8.jpg I'm encountering difficulties with styling a nested div element. When double-clicking the text within this div, only half of it gets highlig ...

htmlcssdjango

Is it possible to customize the background color of the 'rows per page' selector box in Bootstrap 4 bootstrap-table?

The text is set in white on a dark grey background by default and appears just below the formatted table. Best regards, Phil Please refer to the attached image:Section of table showing rows per page selector box ...

cssbootstrap-4bootstrap-table

Is it possible for a complete CSS ".class" to possess the specificity of '!important'? [closed]

It's quite challenging to determine the exact inquiry being made here. This question lacks clarity, precision, completeness, specificity, and is overly general or rhetorical, making it impossible to answer in its current state. To obtain assistance in ...

jquerycssclasscss-specificity

What is preventing me from being able to import a React component from a file?

I've double-checked my code and everything seems correct, but when I view it on the port, only the app.js file is displayed. import React from 'react'; import ImgSlider from './ImgSlider'; import './App.css'; function ...

javascripthtmlreactjsjsx

What is the best way to create a code block with a specific width in mind?

I'm currently working on a documentation website and I'm facing an issue with my code blocks. I can't seem to set a specific width for them; instead, the width is determined by the text content they contain. What I really want is for the co ...

htmlcsswidthinlinestyling

Checkbox malfunctioning when trying to add values after being checked

I have successfully completed a calculation system project using JavaScript. Everything works well, the calculations are accurate and taxes are included properly. However, I am facing an issue where the tax is not being included when I click on the checkbo ...

javascripthtmljqueryinnerhtml

Python allows for the sending of HTML content in the body of an email

Is there a way to show the content of an HTML file in an email body using Python, without having to manually copy and paste the HTML code into the script? ...

pythonhtmlemail

Struggling with CSS, seeking improvements to align with my previous coding style

After spending a considerable amount of time working on my game, I made the decision to change my navigation bars to buttons. However, I'm facing issues while trying to finalize the style that I had previously. Here is the old code fiddle: https://js ...

htmlcss

Tips for incorporating multiple classes in Material UI by utilizing the classes props

When using the css-in-js technique to apply classes to a react component, how can I add multiple classes? Below is an example of the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap&apo ...

cssreactjsmaterial-designmaterial-uijss

The art of spinning in CSS

Can anyone help me figure out how to make an animation in CSS stay at its last frame instead of reverting back to the beginning? The <i>animation-fill-mode: forwards;</i> property doesn't seem to be doing the trick. Is there a workaround ...

cssanimationrotationcss-animations

What is the process for invoking a websocket from an HTML client?

I have created a WCF Service using netHttpBinding binding and it is hosted on IIS 8 (Windows Server 2012). The interfaces for the service are as follows: [ServiceContract(CallbackContract = typeof(IDuplexCallbackContract))] public interface IHelloWebSocke ...

javascripthtmlwcfwebsocket

Instructions on implementing a floating label on a select2 dropdown menu

I am currently utilizing the select2 plugin for my select dropdowns on a webpage. I have multiple select dropdown boxes and I need to implement a floating label specifically for the selected dropdown. Despite my efforts and searches, I have not been able ...

jqueryhtmlcsstwitter-bootstrap

Tips for naming multiple select options for form submission---Different ways to name

Struggling with multiple selects in a form? Find out how to name them correctly here. Take a look at this example: <form action="/product/create" method="post"> <table> <tr> <td> <input type="text" na ...

htmlnode.jsformsexpresssubmit

The little DIV strayed beyond the boundaries of its parent DIV

I am facing a challenge with the positioning of nested divs within my parent div. The first two are aligned correctly, but the third one is dropping down outside of the parent div on the y-axis. I have tried various solutions from StackOverflow without suc ...

htmlcss

How can we trigger the Skill bar effect upon scrolling to the section?

I have created a stunning Skill Bar that is functioning perfectly. However, I am looking to enhance the experience by having the skill bar effect trigger only when I scroll to that specific section. For example, as I navigate from the introduction section ...

javascriptjqueryhtmlprogress-bar