Tips for overlaying text on top of two images positioned side by side

I'm attempting to overlay text on two images placed side by side to fill the entire page. Here is the code:

HTML:

    <div class="main">
        <img src="city.jpg" class="city" alt="city">
        <img src="couple.jpg" class="couple" alt="couple">
    </div>

CSS:

.main {
    display: flex;    
    justify-content: space-between;
    width: 100%;
    height: 152.5vh;
  }
  
  .city {
    flex-basis: 50%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .couple {
    flex-basis: 50%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

Both images are aligned without gaps in between. I want to insert text in the center on top of both images. What can I attempt to achieve this?

I have searched online for a solution, but nothing has worked or was too complex to understand and implement. Thank you in advance!

htmlcssimagetext

Answer №1

Personally, I prefer using grid over flex for this particular layout.

It's a simple grid with 2 rows and 2 columns.

The text div spans across 2 cells in the first row, while the image occupies one cell in the second row.

body {
  margin: 0;
  padding: 0;
}

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  max-width: 100%;
  height: 152.5vh;
}

.text {
  grid-area: 1 / 1 / 2 / 3;
  align-self: center;
  justify-self: center;
  color: #222222;
}

.city {
  grid-area: 2 / 1 / 3 / 2;
  width: 100%;
  height: 100%;
}

.couple {
  grid-area: 2 / 2 / 3 / 3;
  width: 100%;
  height: 100%;
}

.city img,
.couple img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="main">
  <div class="text">
    Title for Image Set
  </div>
  <div class="city">
    <img src="https://picsum.photos/id/237/800/600" alt="city">
  </div>
  <div class="couple">
    <img src="https://picsum.photos/id/85/800/600" alt="couple">
  </div>
</div>

Answer №2

in response to your recent comment where you mentioned "that's right, over the two images on the center"

we can still utilize a grid layout for the images. Additionally, I have positioned the grid as relative and the text as absolute. Feel free to adjust the top value as needed.

body {
  margin: 0;
  padding: 0;
}

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  max-width: 100%;
  height: 152.5vh;
  position: relative;
}

.text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #222222;
}

.city {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  height: 100%;
}

.couple {
  grid-area: 1 / 2 / 2 / 3;
  width: 100%;
  height: 100%;
}

.city img,
.couple img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="main">
  <div class="text">
    1 title for 2 image
  </div>
  <div class="city">
    <img src="https://picsum.photos/id/237/800/600" alt="city">
  </div>
  <div class="couple">
    <img src="https://picsum.photos/id/85/800/600" alt="couple">
  </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

Designing an adaptive div for textual content without relying on Bootstrap

I am working on creating a responsive div that includes an image, text, and spacing between the divs. Initially, I had divs with spacing and text but they did not resize properly when more text was added. I am aiming to achieve a layout similar to this: ht ...

css

Guide on displaying an EJS page with AngularJS on a Node.js server

Having an issue with rendering an ejs page through nodejs. The page works fine independently, but fails to load when rendered via nodejs. Any help would be appreciated. ejs page: <html> <script src="/home/aniruddha/Downloads/angular.js"></ ...

htmlangularjsnode.js

Steps to selectively enable or disable checkboxes in a dynamic table depending on a dropdown selection

I'm currently facing an issue with a dynamically generated HTML table from a JSON file. Each row in the table consists of a dropdown list and a checkbox. I need the checkbox to be disabled when the default value is selected in the dropdown, and enable ...

javascriptjqueryhtmlcheckboxdrop-down-menu

Navigate to element based on data attributes

Trying to find a way to scroll an element to a specific ID using data-attributes instead of anchor tags. Here is what I have so far: When a button is clicked, it should display the content and scroll to the element that matches the data-attributes. Howeve ...

javascriptjqueryhtml

When using $dialogs.create on my website, a popup form appears with specific formatting limitations dictated by the defining code

When a user clicks a button on my website, a function in the controller is triggered. Here is the function that runs when the button is pressed: $scope.launch = function(idOfSpotOfInterest, schedOfSpotOfInterest){ var dlg = null; dlg = $dialogs. ...

javascriptjqueryhtmlangularjstwitter-bootstrap

The appearance of the page varies when viewed on different computers using the same version of Firefox

Previously, I posed a question with a touch of irony regarding Firefox without providing an example. As a result, my question was downvoted and I had to request its removal. Now, I have an example illustrating the issue at hand. It took some time to clean ...

htmlcssfirefoxwindows-7

CSS Style for Organizing Content

I'm struggling to create CSS for a hierarchical display, resembling a tree structure of files and folders. Currently, I am using nested unordered lists in my HTML: <ul> <li>animals<ul> <li>dogs</li> <li>c ...

htmlcsshtml-lists

The $mdSticky feature in AngularJS Material seems to be malfunctioning

It's been a challenge for me to get the md-toolbar to stay in the top position. I decided to create a custom directive using the $mdSticky service in AngularJS. var app=angular.module('app',['ngMaterial']); app.controller(&apos ...

javascriptcssangularjsangular-materialsticky

Could you provide some advice for creating a Single Page website?

I am working on a simple HTML setup with various elements such as a navbar and content blocks. <html> <head> <title>My HTML5 App</title> <meta charset="UTF-8"> <meta name="viewport" content="wid ...

javascriptjqueryhtml

Enhancing reader experience with AMP image optimization

My website features AMP pages that provide editors with the ability to insert images into the content. These images are shown using an amp-img element and appear properly in regular browsers. However, when viewed in reader mode or when crawled by services ...

htmlamp-htmlamp-img

Utilize JavaScript or JQuery to create a dynamic pop-up window that appears seamlessly on the

Looking to create a unique feature on an HTML page? Want a clickable link that opens a "pop-up" displaying a specific image, right within the page rather than in a new tab or window? Ideally, this pop-up should be movable around the page like a separate ...

javascriptjqueryhtml

"Utilizing CSS3 columns to create a layout with one column

I am looking to divide my webpage into multiple columns, starting with three but potentially adding more in the future. My current approach involves using Flexbox to create equal-width columns: <style> .container { display: flex; } .column { ...

htmlcss

Is there a way to ensure that my if statement functions properly within this script?

Yesterday, I sought advice on my question, but everyone recommended using the BeautifulSoup library. Unfortunately, I am restricted from utilizing any external libraries for this class, although I have managed to make some progress. The goal of my code is ...

pythonhtmlpython-3.x

Pictures in the portfolio failing to load on Mozilla Firefox

Having some trouble with my WordPress website bmfconstruction.com.au/new/. In the project section, all images are loading correctly in Chrome, Opera, and IE. However, when it comes to Firefox, none of the images seem to be showing up. I've tested this ...

javascriptcsswordpressimagefirefox

Ways to align two distinct columns side by side in a singular row on a designated spot for mobile display

Looking for guidance with the layout of my code. In mobile view, the image is currently displayed at the end after the paragraph, but I want it to be shown after the sub-header just above the paragraph. I've tried using flex and other methods, but the ...

htmlcssbootstrap-4

Utilizing JavaScript to retrieve input names from arrays

This is the HTML form that I am currently working with: <form action="#" method="post"> <table> <tr> <td><label>Product:<label> <input type="text" /></td> <td><label>Price:<label> ...

javascriptjqueryhtmlformsdom

What are some ways I can incorporate image sprites into my code?

I need assistance integrating image sprites into my code. How can I implement them and set everything up properly? I recently learned about using image sprites to resolve a specific issue, but I am unsure of the steps needed to configure them correctly. ...

javascripthtml

Can a video or image be displayed in HTML using an absolute path from a disk named E: while the localhost files are located in C:?

I'm attempting to construct a basic webpage utilizing HTML and PHP to display various videos, each video within its own videoplayer. The issue arises when I try to find the videos (they are stored in a folder on my secondary hard drive labeled E:&bso ...

htmlpathfilesystemsvideo-streaming

The jQuery equalTo function is throwing an error because it doesn't recognize that the two emails are identical

Why is it that even though both email addresses are exactly the same, I still get an error message saying they don't match? The error seems to be with email2 specifically. * Email: <input type='text' name='email' /> <br/ ...

javascriptjqueryhtmlvalidationjquery-validate

Guide on including a dropdown-item within the navbar

I've implemented a header with a navbar inside. I want to create a dropdown menu element, but for some reason, my item is not appearing. On this link, it looks simple: https://getbootstrap.com/docs/4.0/components/navs/ Pills with dropdowns <l ...

htmlcssdrop-down-menubootstrap-4navbar