Guide on positioning a small image on top of a parent image using CSS

I have an image for a web page design, and I embedded it in an HTML file to display it. Here is the CSS code:

.imageMain {
  position: relative;
  height: 100vh;
  /* For 100% screen height */
  width: 100vw;
  /* For 100% screen width */
}

img#homeinactive {
  position: relative;
  top: -960px;
  left: 750px;
  width: 40px;
  height: 40px;
  z-index: 999;
}

Now I want to add a small image on top of the main image to act as a button that redirects users somewhere. However, the small image is not staying in place when the screen size changes due to the .imageMain CSS class stretching the main image automatically. Any suggestions on how to keep the small image at the top center regardless of screen size?

The current CSS for positioning the small image is incorrect.

Here's the HTML:

htmlcss

Answer №1

.box {
  position: relative
}
.mainImage {
    height: 100vh; /* Adjust for full screen height */
    width:  100vw; /* Adjust for full screen width */
    object-fit: cover;
}

img#inactive {
    position: absolute;
    left: 50%;
    top:0;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
}
<div class="container">
<img class="mainImage" src="images/mainphoto.png" />
        <a href="index.php"><img id="inactive" class="topPhoto" src="images/navHeader/topphoto.jpg"/></a>
</div>

Answer №2

To center your second image using flex, simply wrap it in a div and apply justify-content: center;. This will keep the image centered at all times.

Check out this example for reference: https://jsfiddle.net/psparthsahni/50e9nuzh/

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

How can I incorporate a dropdown menu into my website's navigation using Bootstrap 4 alpha?

This content is based on the Bootstrap v4 Alpha blog theme. I integrated it into a project but encountered issues when trying to add a dropdown menu to the navigation bar. Despite my attempts, the dropdowns did not appear as expected. I included the code ...

htmlcssbootstrap-4

"activeStyle" attribute consistently being implemented on links within pagesindex.js

Just starting out with Gatsby/React and web development in general, so apologies if this is an easy fix. I'm facing an issue that I can't seem to solve. Currently, I'm working on my website's header and trying to create links to naviga ...

htmlreactjsgatsby

Utilizing CSS percentage height when the parent element is constrained by a defined minimum and

It is a common rule that when applying a percentage height to an element, the percentage is calculated based on its parent's height. Consider a scenario where you want a child element to be 40% of its parent's height. The parent element has both ...

htmldomcss

AngularJS: How to automatically scroll to the bottom of a div

I cannot seem to scroll to the last message in my chat window. var app=angular.module('myApp', ['ngMaterial'] ); app.controller('ChatCtrl', function($window, $anchorScroll){ var self = this; self.messageWindowHeight = p ...

javascriptcssangularjsscrollangular-material

Jquery scroll animation not reaching the intended position when scrolling upwards

While developing a new feature for my music player, I encountered an issue with centering the track/div upon clicking in the scrollable parent div. Sometimes it doesn't scroll to the center as intended and instead scrolls erratically to the top of the ...

jqueryhtmlcss

Enhancing WordPress Accessibility with Google Tag Manager

I have been utilizing the Google Tag Manager for WordPress plugin on my WordPress website. I have come across some important issues concerning compliance with the WCAG 2.0 accessibility guidelines. It has been brought to my attention that the Google Tag ...

wordpresscssaccessibilitygoogle-tag-managerwcag

Leveraging HTML5 Canvas for blending multiple transformations

Is it possible to zoom out an image, rotate it by 30 degrees around its center, and then vertically flip the rotated image while maintaining the rotation? ...

htmlcanvas

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

javascripthtmlbootstrap-4bootstrap-modal

Transform charset X to Unicode using Java

What is the process to convert a specific charset to unicode in Java? We have discussed charsets extensively, but this particular topic has not been covered yet. I have a hex string that follows the criteria length%4==0 (e.g. \ud3faef8e). Typically, ...

javahtmlcharacter-encoding

Creating an HTML table from JSON data

Struggling to display real-time statistics in a table on an HTML web page? I have the data in JSON format, but can't seem to get it right. You can find the data at: I attempted the following code snippet, but it was not successful: <!DOCTYPE htm ...

htmljsonurlhtml-table

How to easily remove margin in a Bootstrap alert component

I'm having difficulty removing margins within a bootstrap alert component and I can't figure out why! https://codepen.io/weellydooh/pen/MWKKoqg <div class="alert alert-primary" role="alert"> <p>A simple primary alert—check it ...

cssbootstrap-4

Issue with launching Android application from website

I am looking to add a feature to my Android app that will open the app when a specific link (for example, www.example.org) is visited in the web browser. I have been experimenting with intent filters, but haven't had much success so far. Although I h ...

javaandroidhtmlandroid-intentweb

Sometimes Google Maps API doesn't load properly on my page until I hit the refresh button

Occasionally, I encounter a problem where my Google Map fails to load when the webpage is first opened, resulting in a blank map. However, upon refreshing the page, the map loads correctly. The error message appearing in the Chrome console reads as follow ...

javascripthtmlgoogle-mapsgoogle-maps-api-3google-api

Place the outcome of the function into the div element's attribute

As a newcomer to HTML and JavaScript, I recently dove into using 3Dmol.js. Following a tutorial, I was able to create this code snippet that actually works: <script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script> <div id="el ...

javascripthtml

ReactJs CSS - This file type requires a specific loader for processing. There are currently no loaders configured to handle this file

I've noticed that this issue has been raised multiple times before. Despite going through all the questions, I still can't seem to resolve it. The transition from Typescript to Javascript went smoothly until I reached the implementation of CSS. U ...

javascriptcssreactjswebpack

The flex grow animation fails to activate when the Bootstrap 4 style sheet is added

Trying to implement transitions with flex grow has been a challenge. It works smoothly without any issues, but as soon as I add the bootstrap 4 style sheet, the transitions stop working. I haven't even started using the bootstrap 4 classes yet, it&apo ...

cssflexboxbootstrap-4transition

What could be causing my Angular JS application to malfunction?

Presenting myFirstAngularApp.html <html ng-app="store"><!-- The "ng-app" attribute initializes an Angular app. Everything inside this tag is considered part of the Angular app due to ng-app --> <head> <link rel="stylesheet" type= ...

javascriptangularjshtmldebugging

margin-top aligned to the bottom of two elements

Within this straightforward CSS snippet, my goal is to align the bottom of h1 with the bottom of p, without having h1 display below p. <div id="sqrs" style="width:200px; height:200px; border:1px solid BLACK;"> <p style="width:100px; height:100px; ...

htmlcss

Styling Navigation in Internet Explorer 7 and 8

I'm encountering issues with a drop-down menu system specifically in IE7 and 8. The functionality is smooth in Chrome and FF, but for some reason, it fails to apply certain styles and ends up misaligned in the IE7 and 8 browsers. You can check it ou ...

menucssnavigation

What could be causing my JavaScript code to not function properly in an HTML document?

Hello, I am a beginner in the world of coding and currently delving into web development. Recently, I was following a tutorial on creating a hamburger menu but I seem to be encountering some issues with the JavaScript code. I have double-checked my Visual ...

javascripthtmlcssvisual-studio