Maintaining central alignment while merging 2 images

I am trying to combine two centered images in CSS but I'm facing some alignment issues.

display: block;
margin: auto;

This is what it looks like currently:

The current situation

I want the larger image (currently at the bottom) to be positioned under the smaller image without sacrificing the centered positions. I've experimented with z-index and tried setting positions to relative and absolute, but that just throws off the alignment of the images.

HTML: 

<img id="logo" src="Pics/logo1.png" class="animated bounceInUp">  
<img id="wall" src="Pics/Ywall1.png">

CSS: 

#logo
{
    height: 200px;
    width: 200px;
    display: block;
    margin: auto;
    padding-top: 15%;
}

#wall
{
    height: 500px;
    display: block;
    margin: auto;
}

I also tried following the suggestion provided here, but encountered further alignment challenges. Adjusting the top and left values proved to be cumbersome and didn't result in perfect centering.

Note: I apologize for not being able to embed images or include more than one link due to my lack of reputation on Stack Overflow.

htmlcss

Answer №1

Is it feasible to use the larger image as a backdrop? 

#wall {
    height: 413px;
    width: 620px;
    display: block;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('http://cdn.example.com/wall-large.jpg');
    text-align: center;
  }
<div id="wall">
  <div>
      <img id="logo" src="https://example.com/logo.png" class="animated bounceInUp"> 
      <div>Branding Text!</div>
  </div>
 </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

Some browsers have the tendency to make bold fonts appear wider than usual

It is common knowledge that browsers may display fonts differently, especially when using bold text. This can result in inconsistencies across different browsers unless the font-weight property is set to normal, but this limits our ability to use bold font ...

htmlcss

Selenium - Strategies for locating objects when they lack an ID or Name

Recently, I've delved into using Selenium Webdriver for automation purposes. The particular webpage that I'm looking to automate is infused with CSS styling. My current aim is to interact with a dropdown labeled "Admin", triggering it to display ...

cssseleniumselenium-webdriverautomation

CSS - Choosing between Background Size Contain or Default Size

Is there a solution to my dilemma regarding background images in a div? I need the image to be contained within the div if it's larger (background-size:contain;), but if the image is smaller, I want to keep it as is without stretching or blurring (bac ...

cssbackground-imagebackground-size

What is the process for choosing and making changes to a specific portion of a textContent?

<h1 id="block ">This is my header block</h1> To dynamically change the color of the "block" word every 2 seconds using JavaScript: let colors = ["blue", "green", "pink", "purple"]; let curColor = 0; const changeColor = () => { ...

javascripthtmlcss

Switching Bootstrap Navbar Active State with JavaScript

I have encountered an issue with using the "active" class on my navbar navigation items in Bootstrap 4. When I click on the links, the active state does not switch as intended. I have tried incorporating JavaScript solutions from similar questions but have ...

javascripthtmlcsstwitter-bootstrap

When hovering over the menu, the page's opacity decreases to 0.5

Feeling lost on how to create a navigation menu that reduces the transparency of the entire page to 50% when hovered over. Any advice on the CSS code needed for this scenario? Check out jsfiddle.net/websensation/uMMPa for more insights. ...

jqueryhtmlcss

Creating a dynamic quiz with random images using text boxes in HTML and PHP

I am working on creating a 'guess the picture' style quiz where a random image is displayed as the question, and users must input their answer in a textbox. The question will be selected randomly from 3-5 options each time the page is refreshed o ...

javascriptphphtmlarraystextbox

Cross-browser compatibility issues preventing CSS button effects from functioning properly

Experiencing some challenges with CSS Button effects not functioning consistently across different browsers. The display is satisfactory in Chrome, but not in Firefox. Struggling to pinpoint the source of the issue. Here is my current setup: Fiddle a ...

htmlcssbuttoncross-browser

Just starting out with JavaScript - updating the appearance of an element

Based on the value of a boolean, I am looking to control the visibility of specific tabs in my sidebar when the page loads. var someVar = true; function show_ifTrue() { if (Boolean(someVar) == true) { document.getElementById('x'). ...

javascripthtmlcss

What is preventing me from properly aligning these two divs side by side?

Can someone please assist me with aligning two images side by side in a footer using bootstrap? I have tried offsetting the columns but the images keep stacking on top of each other instead of next to each other. <div class="row"> <div cl ...

htmlcsstwitter-bootstrapweb

Using jQuery to update the CSS background of a selected element among multiple elements sharing the same class

I am currently developing a basic jQuery script that will enable the background color of the clicked element to change. Below is the code I have so far: <dt> <input id="p_method_banktransfer" value="banktransfer" type="radio" name="payment[metho ...

javascriptjqueryhtmlcss

The logo appears cropped in the responsive layout

Responsive Logo Issue I am facing an issue with the logo in the header when viewed using Chrome developer tools in the Galaxy S5 responsive view. It seems that the logo container is too big and needs to be moved after the navbar, but I am unsure how to do ...

csshtmltwitter-bootstrapbootstrap-4

I am having trouble getting the color, metalness, lights, and shaders to work properly in Three JS on my

I attempted to create a simple code using Three.js for a red colored torus with a point light and a textured surface, but unfortunately, all I achieved was a black torus that rotates. It seems like the elements in this code are not functioning as expecte ...

javascripthtmlnode.jsthree.jswebgl

How to create the appearance of multiple line breaks using CSS

While pondering a question, I stumbled upon a humorous solution that wasn't quite finalized. Check out the Fiddle and attempt to remove the <br/> tag. The challenge is to achieve the same effect (red div displayed) without resorting to this ra ...

javascripthtmlcss

What could be causing the issue with the transform property not functioning correctly?

When using two transforms, they typically do not apply simultaneously. However, during the hover event, they can replace each other. Below is the code for a button that I am attempting to create, but the properties do not seem to work properly upon hoverin ...

css

Scrolling horizontally with full width CSS styling

Recently, I finished developing a new website, but upon loading it, I noticed there is an unnecessary scroll. I would appreciate any feedback on why this is happening and how I can fix it. I am happy to share the code here, but from past experience, most ...

htmlcssscrollwidth

Eliminating a pattern with underscore.js or jquery - the complete guide

I am looking to remove the ellipses (...) from a value such as ...India. How can I achieve this using underscore.js, jQuery, or JavaScript? Any tips on how to accomplish this would be greatly appreciated! ...

javascriptjqueryhtmlunderscore.js

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

Begin the div at a width of 0 pixels and expand it towards the right

My current project involves opening a row of blocks with an animation. The desired outcome is to transition from 2 blocks to 3 blocks by clicking a button. Specifically, the block that needs to be added should appear in the middle and fade in from left to ...

jqueryhtmlcssanimation

The ajax call I made is not retrieving any data, only returning an empty array

I am having trouble passing data from JavaScript to PHP through AJAX. Even though I have passed some data, the output is showing as an empty array. Can someone please assist with this issue? <html> <head> <title></title> ...

javascriptphphtmlajax