I currently have a responsive background image, but two additional images layered over it are not adjusting to different screen sizes. What steps can I take to make these images responsive as

I am facing an issue with making two foreground images responsive, despite having a responsive background image. Can anyone help me make these images adjust properly when resizing the window?

While my background image responds well to window resizing, the two images placed on top of it do not. How can I ensure that both the foreground images are also responsive?

CSS code:

.wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
}

.Icon1 {
    position: absolute;
    left: 50%;
    top: 77%;
    transform: translate(-50%, -50%);
    width: 130px;
}
    
.Icon2 {
    position: absolute;
    left: 50%;
    top: 84%;
    transform: translate(-50%, -50%);
    width: 130px;   
}

HTML code:

<div class="col-xs-12 col-sm-6 col-no-padding wrapper">
    <img class="img-responsive" src="background1.jpg"
    alt="Responsive Image1" width="700" height="auto"/>

    <a href="https://www.google.com/"><img src="Images1.png" 
    class="Icon1" alt="Responsive Image" width="auto" height="auto"/></a>

    <a href="https://www.google.com/"><img src="Image2.png"
    class="Icon2" alt="Responsive Image" width="\auto" height="auto"/></a>
</div>
htmlcss

Answer №1

It's recommended to use vw instead of px for setting element widths based on screen size. Check out more information about CSS units here.

Here is an illustration using vw in your code snippet: 

.wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
    
    }
    .Icon1 {
    position: absolute;
    left: 50%;
    top: 77%;
    transform: translate(-50%, -50%);
    width: 20vw;
    }
    
    .Icon2 {
    position: absolute;
    left: 50%;
    top: 84%;
    transform: translate(-50%, -50%);
    width: 20vw;
    
    }

.img-responsive{
  width:100vw;
}
<div class="col-xs-12 col-sm-6 col-no-padding wrapper">
  <img class="img-responsive" src="https://placekitten.com/640/360" alt="Responsive Image1"  />
  <a href="https://www.google.com/"><img src="https://placekitten.com/640/360" class="Icon1" alt="Responsive Image"/></a>
  <a href="https://www.google.com/"><img src="https://placekitten.com/640/360" class="Icon2" alt="Responsive Image" /></a>
</div>

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

Ways to ensure that the height is truly at 100%

When setting the width or height of something to 100% in CSS, it actually only fills up 100% of the browser window. Is there a way to make it take up 100% of the entire page? To clarify: I want a div element to occupy the whole page, regardless of how muc ...

htmlcss

What is the process for setting up automatic tooltip validation messages?

After creating a sample file for validation, everything seems to be working smoothly... However, I now have a specific requirement - I would like to make some modifications while validating. The error message should automatically display in a tooltip. Thi ...

javascriptjqueryhtmltwitter-bootstrapcss

Code for activating datalist on Safari and Opera browsers

As I was wrapping up work on a website, I realized that Safari doesn't support the datalist feature in HTML. This was quite troublesome since a significant portion of the site's audience consists of individuals who may not be very tech-savvy, mak ...

javascripthtmlsafaripolyfills

What are alternative ways to add an HTML snippet to an existing file without relying on jQuery?

Is it possible to inject the entire content of an HTML file, including all tags, into a specific div using only JavaScript? Alternatively, would it be necessary to append each element individually and create a function for this purpose? ...

javascripthtml

Utilizing the Masonry jQuery plugin for optimizing empty spaces

Recently, I came across the Masonry plugin and I'm considering using it in a project. One question that intrigues me is whether there is a way to detect empty spaces that occasionally show up in the layout when divs are positioned. Being able to ident ...

javascriptjqueryhtmlcssjquery-masonry

The spacebar is not functioning properly within a `button` element while using HTML5 `contenteditable`. What steps can I take to fix this issue and get it working correctly?

When using the HTML5 contenteditable attribute, I've noticed that the spacebar does not work in the button element, but it works perfectly fine in the div element. Does anyone have a solution to get it working properly? You can see the issue here: ht ...

javascriptjquerycsshtml

Transforming JSON data into HTML code

I am looking to transfer a list of songs from a JSON file to specific HTML ids using a jQuery function. In the JSON file, there are five songs, and here are two of them in the same format: { "songs": [ { "title": "Bohemian Rhapsody ...

javascriptjqueryhtmljson

Modify the color or background color of a disabled Material UI checkbox

The disabled unchecked checkbox appears too subtle to me, and I would like to enhance it by giving it a grey background and changing the cursor style to not-allowed. I've been trying to implement these styles on the checkbox using the makeStyles, but ...

javascriptcssreactjsmaterial-uimakestyles

Css shaky letters transformation

[SOLUTION] To resolve this issue, you can utilize the will-change CSS property that enforces GPU rendering: will-change: transform; [ORIGINAL QUESTION] After extensive searching on the internet, I have yet to find a solution to a seemingly simple prob ...

javascriptcsstransformjittertranslate3d

Is there a way to supply a list of HTML elements as an argument to a Closure template function?

Below is the template I am working with, and I am looking to pass a list of HTML elements as a parameter: {template .myTemplate} {@param title: string} {@param? listHtml: list<html>} <ul> {foreach $item in $listHtml} & ...

javascripthtmlgoogle-closure-templates

Deleting an object with javascript in django: A step-by-step guide

Is there a way to use JavaScript to create a confirmation window before deleting an item? <div class="card-footer"> <a href="{% url 'course_delete' student.slug %}"><button>Delete</button>&l ...

javascripthtmldjangoajax

Setting up web SMS configuration for email integration

I have a code for sending web mails and SMS notifications that is functioning correctly. However, I want to receive SMS notifications only when users select the “A” value from the servicerequired drop-down menu and do not wish to receive SMS between 8 ...

phphtmlsms-gateway

Expanding upon the initial instance, the parent div effortlessly widens without any visual effects as the child element is revealed or concealed

Experiencing an issue where the div element opens and closes smoothly with jQuery animation, but its parent does not. As a result, the entire page content appears jerky. Here is a demo: http://jsfiddle.net/neDZP/7/ HTML: <div id="A_to_Z_top"> ...

javascriptjqueryhtmlcssanimation

The code isn't functioning properly within the Django template

I attempted to follow this guide but for some reason, the JavaScript isn't functioning properly in my template. I meticulously followed each step, inserted an anchor div with an id of "newItems", and included the infinite scroll script as instructed. ...

javascripthtmldjangodjango-templates

I recently ran npm install --save bootstrap and now I am unable to locate the bootstrap.min.css file anywhere

Trying to follow a tutorial based on a video, I'm running into an issue where I can't locate the bootstrap.min.css file mentioned. Despite searching online, I haven't found any relevant information. The files I have access to are: https://i ...

cssnpm

To keep a link active, it needs to remain in a pressed state until a new

I was experimenting with HTML and CSS, but I couldn't get it to function as desired. What I am trying to achieve is that the first link/tab should appear pressed when the site is opened. It should then change to an unpressed state when another link i ...

htmljquerycss

Sending arguments from PHP using button formaction in a table row

I am facing an issue while attempting to pass two parameters to the opendirectory.php script. The execution of my opendirectory.php script is failing when I click the open directory button. Any assistance would be highly appreciated. Below is how I have ...

phphtmlclickonce

I need to adjust the print layout so that the material extends beyond the confines of an A4 page

I created a chalan format with 3 copies, however only 2 of them are printing correctly on the same page. The third copy is not displaying properly. Take a look at this screenshot: ...

htmlcssangularangular6

ESP32 - Creating a dynamic webpage using a webserver

I am using an ESP32 configured as a webserver. I have multiple webpages that are included as files, such as index.h const char MAIN_page[] PROGMEM = R"=====( <!DOCTYPE html> <html> some divs here.... </html> )====="; The conten ...

htmldynamicwebserveresp32

Changing padding of a button causes surrounding elements to move?

Trying to make a button in CSS appear "pushed down" on :active, I decided to increase the padding-top by 2px and decrease padding-bottom by 2px. However, this adjustment seemed to affect the margins of other elements for some reason that eludes me. I am c ...

htmlcssbuttonmouseeventstylesheet