The art of layering images: How to stack one image on top of another

I am in the process of trying to place a logo on top of an image, but I have been unsuccessful so far. Rather than overlapping, the second image is appearing next to the first one. Can you help me figure out how to solve this issue?

This is for a website project I am working on using HTML and CSS.

HTML file:

<section id="home">
                <div class="backgroung" >
                    <img src="Images/banner1.jpg" style="width: 100%" class="bg">
                    <img src="Images/yellow.png" class="logo">               
                </div>
            </section>

CSS file:

#home{
    position: relative;
    top: 0;
    bottom: 0;
}
.bg {
    position: relative;
    top: 0;
    bottom: 0;
    z-index: 1;
}
.logo{
    position: absolute;
    top: 20px;
    bottom: 30px;
    height: 250px;
    width: auto;
    z-index: 2;
}

I anticipated the images overlapping each other once implemented. I suspect that the issue may be due to the fact that the images are not the same file types.

htmlcss

Answer №1

Don't forget to adjust the left property of the logo:

.background {
  display: inline-block;
  position: relative;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
<section id="home">
  <div class="background">
    <img src="https://picsum.photos/id/583/300/300" class="bg">
    <img src="https://picsum.photos/id/237/100/100" class="logo">
  </div>
</section>

You have the option to utilize multiple background images as well:

.background {
  width: 300px;
  height: 300px;
  background:
    url(https://picsum.photos/id/237/100/100) no-repeat center, 
    url(https://picsum.photos/id/583/300/300);
}
<section id="home">
  <div class="background">

  </div>
</section>

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

Problems arise when attempting to use CSS content for double quotes

Could someone confirm if the syntax '>\0147' is correct? .blockquote p::before { content: '>\0147'; font-family: serif; font-size: 3em; line-height: 0; display: block; margin: 0 0 20px 0; } ...

css

Creating a dual style name within a single component using Styled Components

Need assistance with implementing this code using styled components or CSS for transitions. The code from style.css: .slide { opacity: 0; transition-duration: 1s ease; } .slide.active { opacity: 1; transition-duration: 1s; transform: scale(1.08 ...

cssreactjstypescriptnext.jsstyled-components

What methods does Coinbase use to achieve this effect? Is it possible to recreate it in a React application? (Dropdown menu positioned relative to a button on hover or click

Notice the hover effect on the Businesses section, where a prepositioned dropdown menu appears, spanning the full width of the screen. How was this effect achieved and can it be recreated in React if it wasn't originally coded using React? https://i. ...

htmlcssreactjsdrop-down-menumaterial-ui

The CSS styles on my GitHub Pages website are not being reflected on the HTML page

I've been struggling for a while now to host my Portfolio CV on GitHub and I can't seem to get my CSS styles to apply correctly on the URL. - This is how I have linked it in the HTML document: <link rel="stylesheet" type="text/ ...

htmlcssgithubgithub-pagesweb-hosting

Creating a series of scalable svgs of uniform size in a row, enabling me to resize them based on width without disrupting the overall design

I need a row of equally sized SVGs with some text below them, like a navigation bar but larger. I almost have it working, but there are some issues with my current setup. To clarify, this is what I am aiming for: The SVGs should be responsive and scale a ...

htmlcsssvgnavbarscaling

Maximizing the Potential of Bootstrap 5's Grid System

I'm struggling a bit with the Bootstrap grid system. I want to create 6 divs or containers that span the full width on smaller devices like mobiles, use 25% of the width on medium devices like tablets, and display all 6 in a single row on large deskto ...

csstwitter-bootstrap

CSS Animation glitch with images

I am currently facing an issue with a slide that transitions between four pictures. The slide is set at a specific pace, but I am encountering a problem with the transition from the last slide back to the first one. I have attempted various solutions such ...

htmlcssanimationtransitionslide

What is the best way to include multiple ng-repeats within a single ng-repeat?

Hey, I'm facing quite a tricky situation with this grid and could use some assistance. I'm trying to figure out how to populate the data using ng-repeat. I've attached an image showcasing the desired layout of the grid and the order in which ...

javascriptangularjstwitter-bootstrapcssangularjs-ng-repeat

What is the best way to position a button at the bottom of an image?

I am facing an issue with the following code snippet: * { box-sizing: border-box; } .wrapper { position: relative; /* border:1px solid blue; */ width: 250px; } .text { position: absolute; border:1px solid red; bottom: 0px; ...

css

what's causing the tabs in bootstrap to malfunction

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootst ...

javascriptjqueryhtmlcsstwitter-bootstrap

JavaScript for Dynamic Scaling Animations

I am currently working on animating an SVG button and I am trying to incorporate the transform property with a fadeout using opacity attributes in Javascript. This is how I have attempted to write the code: (Starting with opacity 0 and scale 0) (I am awa ...

javascriptcssattributestransform

HTML embedded content is not appearing on the React webpage

I'm attempting to incorporate GoFundMe donation buttons into a React page, but unfortunately, they aren't displaying on the screen. const Donation = () => { return ( <div> <div className="gfm-embed" d ...

javascripthtmlreactjs

Enrollment in the course is conditional on two words being a perfect match

I have a concept in mind, but I'm struggling to piece it together. I have bits of different methods that just don't seem to align. That's why I'm reaching out for your expertise. Let's say I have 3 content containers with the clas ...

javascriptjquerycssmatch

Activating the information from the second dropdown menu once it has been chosen in the first dropdown menu using jQuery

Is there a way to create a jQuery function that will only allow the value from the second dropdown to be enabled if a value is selected in the first dropdown? For example, if I select Shiva in the first dropdown, it should then be disabled in the second d ...

javahtmljqueryspring-bootthymeleaf

What are the steps to gather user data and generate a roster of individuals currently online?

I am currently working on a way to gather information about the users who are currently logged into my website. Here's how it works: When a user enters my website, they have the option to choose a nickname using an input box. Then, there are five diff ...

javascripthtmlangulardatabasechatroom

Styling in CSS to ensure scrollbar is constantly displayed without narrowing the container's width

Is it possible to have a vertically scrollable div with an always visible scrollbar without the scrollbar affecting the width of the elements inside? I attempted some CSS modifications, but the scrollbar still reduced the available width of the div. Is th ...

htmlcssstylesheet

When the text exceeds its container, the CSS property overflow will display only the

.example{ overflow:auto; } <div class="example"> <p>Some Additional Text Here<P> </div> This particular code snippet showcases the initial portion of the text, allowing for scrolling down to reveal items 5 and 6: 1 2 ...

htmlcss

Creating a Stroke on an html5 canvas with the help of EaselJS

As a newcomer to Easel and HTML5, I am attempting to draw a line on a canvas using EaselJS. The X-coordinate is set to 100 while the Y-coordinate is taken from an array list. Below is the code I have written. Can someone please help me identify where my ...

javascripthtmlhtml5-canvaseaseljs

Concealing a div based on a condition

Having difficulty concealing a div once a specific condition is met. The condition depends on the user logging into a web application. In my CSS file, I have set the multipleBox div to visibility: hidden, along with other styling attributes like border co ...

javascripthtmlcssajaxjsf

The CSS does not display properly on iPad or mobile devices

Recently, I had the opportunity to design a website for a local music school. This project was a great learning experience that has shown me the importance of continuous improvement and practice. Check out the site here Initially, I wanted to make the w ...

cssipad