Crafting a captivating stacked image using just two segments

Recently, I designed my own personal website. To make it visually appealing, I decided to use a background picture as the header and placed my portrait as the avatar. My inspiration for the design was drawn from the sleek interface of Linkedin profiles. However, I encountered an issue while trying to stack these two images together.

In order to create this layout, I utilized bootstrap 3. Here's the HTML code that I used:

<div class="head-image">
    </div>
    <img src="assets/images/ava_Do.png" alt="ava_Do" id="ava_image">

For styling purposes, here is the CSS code that I implemented:

 body, html {
  height: 100%;
  margin: 0;
}

.head-image {
  /* Full height */
  height: 35%; 
  background-image: url(../assets/images/image.png);
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

#ava_image {
  position: absolute;
  max-width: 100px;
  top: 20%
  z-index: 1;
}

My ultimate goal is to successfully stack these images in a similar manner to how they appear on a Linkedin profile.

Answer №1

It seems like you're asking for the items to be stacked on the z-index.

Here is the code to show the background image and the portrait overlay:

<div class="head-background">
  <img class="head-image" src="http://placehold.it/150x150" alt="Placeholder">
</div>

To position them correctly, use these styles:

.head-background {
  background: #666;
  height: 200px;
  position: relative;
  z-index: 0;
}

.head-image {
  border-radius: 50%;
  left: 15px;
  position: absolute;
  top: 100%;
  transform: translateY(-75%);
  z-index: 1;
}

You can view a demonstration in this JSFiddle link.

Answer №2

Give it a shot in your HTML file:

<div class="header-img">
    <img src="assets/pictures/profile_pic.png" alt="profile_pic" id="profile_picture">
</div>

You may have mistakenly left the tag open like this: <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

When attempting to execute the delete script, some errors were encountered

The following error has occurred: An issue with the SQL syntax has been detected; please refer to the manual specific to your MySQL server version for guidance on the correct syntax to use near ''sarojini'_bookings WHERE date=2014-07-24 A ...

What does the term "root element" refer to in the Material-UI documentation?

I am finding the terminology used in material ui confusing and would appreciate if someone could clarify it for me. For example, let's consider this information from https://material-ui.com/guides/api/: Spread Undocumented properties supplied ar ...

Retrieving the value of the option that has been selected from a dropdown

I have successfully implemented a drop-down menu with the following code: // Creating a select element for priority within a form in the bottom row div const formPriority = document.createElement("select"); formPriority.setAttribute("name","project"); form ...

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

Show information from mysql in a dual-column format

I am pulling data from a single table in mysql, currently displaying it in one column. I want the data to be displayed in two columns next to each other. You can check out the results at www.urimsopa.com Here is my current code: $results = $mysqli->qu ...

Adjust the image size in the jumbotron to fit perfectly without the need for scrolling

I'm in the process of creating a website with a prominent jumbotron section on the landing page. I am looking to adjust the height of the image within the jumbotron without cutting off any parts of the picture, and I do not want it to scroll to displa ...

Verify the authenticity of a date using the locale parameter in the Intl API

Seeking advice for validating inputfield based on locale argument. How to format dates differently depending on the specified locale? For example, if locale is 'en-uk' then date should be in mm/dd/yyyy format, but if locale is 'de-ch' i ...

What is the process for adjusting the color of a div?

Is there a way to adjust the background color of a div when hovering over another div in HTML? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or ...

What could be preventing the onclick event from functioning properly in JavaScript?

After creating a basic JavaScript code to practice Event handling, I encountered an issue where the function hello() does not execute when clicking on the "Click" button. What could be causing this problem? html file: <!DOCTYPE html> <html> ...

What is the best way to position three SVG files in the center of a webpage?

I want to combine three separate SVG files to create one single graphic. The first SVG file is a red triangle, the second is a blue circle inside the triangle, and the third is a purple rectangle beneath the triangle with a little space in between. My obje ...

Is it possible to use jquery to specifically target classes?

I am trying to achieve the following: $('.class.img').css('cellpadding', variable); However, this code does not seem to be working as expected. Despite searching online, I have not been able to find a solution. Any assistance on how to ...

Converting a table into JSON format

I'm working on developing a live application that will showcase data in a table format like the one below: Machine Production Scanned Delta Mach 1 2500 1000 1500 Mach 2 1500 1300 200 Mach 3 6500 5000 1500 Mac ...

Sorting through a table based on the name of the element

I am currently working on filtering an HTML table using a search form. It's working great, but I'm facing an issue where the filtered elements are trying to fill the entire width of the table instead of maintaining their original width (which is ...

Using JavaScript and Ruby on Rails to dynamically modify URL query parameters based on a dropdown form

I need help updating a URL based on dropdown selection. I want the query to be dynamic, and here is my current code snippet: <select id="mySchool" onchange="this.form.submit()"> <% @schools.each do |school| %> <option value="< ...

Choose an option from the dropdown menu using a variable

I've been struggling to get a dropdown's selected value to change based on a query result. No matter what I do, it always defaults to the first option. After searching through numerous similar questions, none of the solutions seem to work for me ...

Update the numerical data within a td element using jQuery

Is there a way to use jquery to increase numerical values in a <td> element? I've attempted the following method without success. My goal is to update the value of the td cell by clicking a button with the ID "#increaseNum". Here is the HTML st ...

Document the user's input by recording it in a text file

After experimenting with a simple HTML code like this: <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> ...

What is the best method to locate and reference a specific string within an HTML document using Python?

My specific need involves two separate html pages. One page consists of hyperlinks while the other contains detailed responses corresponding to those hyperlinks. What I am looking for is, when I click on a hyperlink in the first html page, it should dire ...

There are two images within a container - one as the background and the other as the foreground. What measures can I take to

I am experiencing an issue with two images on my website. One is set as the background and the other is displayed above it, appearing properly when viewed on larger screens but distorting when the browser window is minimized. You can view the site at the f ...

Struggling to add custom styles to an Ionic radio button

I'm struggling to adjust the position of the icon in an Ionic radio button so that it sits a bit higher, but I can't seem to figure out how to do it. Below is the code snippet for reference: // HTML <ion-radio class="radio-input" mo ...