Help with CSS and React - how to position text in front of an image

Currently, I am working on positioning text on top of an image and centering it within the parent div. You can see the desired design in the screenshot below:

https://i.sstatic.net/NNidz.png

After experimenting with code and using z-index to layer the text over the image, I have successfully achieved that. However, I am now faced with the challenge of centering the text inside the parent div according to the design.

Here is the code snippet I am using:

<div style={{ display: `flex`, flexDirection: `column` }}>
    {/* image and title */}
    <div>
      <StaticImage
        src="../images/home.png"
        width={1000}
        quality={100}
        formats={["auto", "webp", "avif"]}
        alt="home image"
        style={{ marginBottom: `1rem`, zIndex: `1` }}
      />
      <div style={{
            position: `absolute`,
            top: `50%`,
            left: `50%`,
            transform: `translate(-50%, -50%)`,
            zIndex: `2`,
            display: `flex`,
            justifyContent: `spaceBetween`,
            flexDirection: `row`
          }}>
        <h1 style={{
            color: `white`,
            fontSize: `7vw`
          }}>Gareth</h1>
        <h1 style={{
            color: `white`,
            fontSize: `7vw`
          }}>Veale</h1>
        </div>
    </div>
</div>

However, I have noticed that the text appears centered on the entire page. I suspect this might be due to the 50% values for the top and left properties?

https://i.sstatic.net/ywmti.jpg

Answer №1

To observe the impact of flex alignment, it is recommended to specify a width for the parent div.

Refer to the code snippet provided below.

<div style={{ display: `flex`, flexDirection: `column` }}>
{/* image and title */}
<div>
  <StaticImage
    src="../images/home.png"
    width={1000}
    quality={100}
    formats={["auto", "webp", "avif"]}
    alt="home image"
    style={{ marginBottom: `1rem`, zIndex: `1` }}
  />
  <div style={{
        position: `absolute`,
        top: `50%`,
        left: `10%`,
        width: `80%`,
        transform: `translate(-50%, -50%)`,
        zIndex: `2`,
        display: `flex`,
        justifyContent: `spaceBetween`,
        flexDirection: `row`
      }}>
    <h1 style={{
        color: `white`,
        fontSize: `7vw`
      }}>Gareth</h1>
    <h1 style={{
        color: `white`,
        fontSize: `7vw`
      }}>Veale</h1>
    </div>
</div>

By adjusting the left and width values as indicated, you can achieve the desired outcome. Trust this solution addresses your concern.

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

What is the process of adding a phone number with an extension on an iPhone web application?

When building a web application, inserting the following number: <a href="tel:888-123-4567">call now</a> The iPhone will automatically convert that link into an instant call function when clicked. But what should I do if the number includes ...

Aptana Studio 3 fails to detect PHP code embedded within an .html file

When writing code, such as: <!DOCTYPE html> <html> <body> <?php echo "My first PHP script!"; ?> </body> </html> After <?php, I am encountering a red X icon error indicating that a ">" is missing at the end of t ...

Personalized pagination - React data table

I'm looking to create a unique pagination design using react-table that fits my specific requirements: Currently, the default pagination I'm using looks like this: https://i.sstatic.net/xf1sE.png But I want it to resemble this: https://i.ssta ...

Having trouble with CSS selectors functioning properly in Rhomobile Studio for Android

I am a beginner in the world of Rhodes and Rhomobile Studio. Coming from a Rails background, I am used to the .css.scss file extensions which allow powerful CSS3 codes to be executed. However, in Rhomobile Studio, these extensions are not recognized. I am ...

Switching Column Content with jQuery on Mobile Devices

In my design, I have a dynamic two-column layout created using Twitter Bootstrap 3. The layout switches between image-text and text-image alignment for each row. The goal is to adjust it for smaller screens (less than 768px) so that rows with images on th ...

No files were found that matched the criteria. (ReactJS)

Recently, I attempted to start my react app by running npm start. However, it did not launch and instead displayed the following message: '/Users/macintoshhd/iCloud Drive (Archive)/Documents/Abu Abdillatief/Self Study/vetme/src/.' were found. H ...

Leveraging createMuiTheme to customize default styles for divs, paragraphs, and the body element

Seeking guidance on customizing a Material UI Theme I aim to modify the default styles for elements like <body>. Currently, at the root of my React tree: import theme from './mui-theme' ReactDOM.render( <Router> <ThemePr ...

Rows Within Rows That Outsize Their Parent

I am having trouble with the Bootstrap 4 grid layout while working on Vertical forms. My goal is to place a col-lg-9(child) inside a col-lg-6(parent). For instance: <div class="form"> <div class="row"> <div class="col-lg-6"> ...

Pressing the 'Enter' key within a textarea in a JQuery

This question seems fairly straightforward. I have a text area where hitting "enter" submits the content. Even though I reset the text to "Say something..." after submission, the cursor continues to blink. Is there a way to require the user to click on ...

JavaScript code that deletes text from a document - Script eradication

I am trying to display the message "Todays Beer Style is: "Beer Style". However, when I add the javascript code, the "Todays Beer Style is:" text disappears. I'm not sure why this is happening. Below is the HTML code for reference. HTML Code <!DO ...

How can you hide all siblings following a button-wrapper and then bring them back into view by clicking on that same button?

On my webpage, I have implemented two buttons - "read more" and "read less", using a Page Builder in WordPress. The goal is to hide all elements on the page after the "Read More" button upon loading. When the button is clicked, the "Read More" button shoul ...

The constant continues to appear as undefined in the final output

Recently, I've started working with React and I'm facing an issue while using the .map function to list categories and display them in the return statement. Every time I try to include the variable in the return statement, it shows up as undefine ...

Zurb Foundation gem causing navigation errors

Typically, I rely on the Twitter Bootstrap Rails gem for my projects, but this time I decided to try out the Zurb Foundation gem. Following the installation instructions meticulously, I added the navigation code: <div class="row"> <div class="th ...

Error Message: Undefined Constructor for Firebase Google Authentication

Hey there! I've been working on integrating Firebase google authentication into my project. Unfortunately, I encountered an error while testing it out. Here's the error message that appeared in the console: Uncaught (in promise) TypeError: Cannot ...

Instructions on passing props or conditions to a nested style method within Material UI

One of the challenges I encountered in my React app involves styling with Material UI and specifically using the makeStyles function. The issue arises when applying two styles that depend on a condition called isRTL. In cases where isRTL is true, a specif ...

Discover the power of EJS embedded within HTML attributes!

There are two cases in which I am attempting to use an EJS tag within an HTML attribute. SITUATION 1: <input style="background-image: url(<%= img.URL %>)" /> SITUATION 2: <input onchange="handleCheckboxChange(<%= i ...

Tips for adjusting the width of Material UI TextField within a Table

I am utilizing a Material UI Table. This is how I construct it: tableValues.map((curRow, row) => { tableRows.push( <TableRow key={this.state.key + "_row_" + row}> {curRow.map((cellContent, col) => { let adHocProps ...

Label text will not be wrapped in front of the label (bootstrap)

I'm struggling with some css coding. I want the text to wrap so the label is positioned on the middle right of the box, similar to this example: https://i.sstatic.net/RBIOS.png. However, currently it looks like this: http://jsfiddle.net/yuvemL1z/ and ...

What is the best way to retrieve the ID of a post request using React's axios hook?

My goal is to make a post request to create an app, and then establish its links. To achieve this, I need to obtain the id of the newly created items in order to create the links. Is there a way to retrieve the id of the item created through the post reque ...

How can I apply a shadow effect to a <View> element just like a regular tab bar?

My customized navigation bar is using the <View> element. https://i.sstatic.net/QA8Ad.png Is it possible to add a bottom shadow similar to the default react-navigation bar (refer to the image below)? https://i.sstatic.net/ORD8J.png I find it chal ...