The overlay background on the image does not seem to be functioning correctly

I'm currently working on adding an overlay to my image in order to darken it and display text over the top. I've tried using absolute positioning for both the image and overlay, but the overlay ends up covering the entire window and sitting above the text. What I want is for it to look like this:

https://i.stack.imgur.com/YsBAc.png

Check out the CodeSandbox here: https://codesandbox.io/s/amazing-mendeleev-gohz7?file=/src/App.tsx

Here's the code snippet:

<div className="container" style={{ padding: "30px" }}>
        <img style={{ borderRadius: "10px" }} src="dubai.png"></img>
        <div
          style={{
            background: "rgba(0, 0, 0, 0.5)",
            width: "100%",
            height: "100%",
            zIndex: 1,
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)"
          }}
        ></div>
        <div
          style={{
            color: "#fff",
            position: "absolute",
            top: "20%",
            left: "50%",
            transform: "translate(-50%, -100%)",
            fontFamily: "Roboto",
            width: "100%"
          }}
        >
          <div style={{ fontSize: "35px", textAlign: "center", zIndex: 200 }}>
            DUBAI UAE
          </div>
        </div>
      </div>
htmlcssbackground-imageoverlay

Answer №1

To properly position your overlay, it needs to be relative to its parent element.

If the parent has padding: 10px set, this will make the image smaller by 20px in both width and height, but the overlay will cover the entire div, creating a border around the image due to the empty space created by the padding on the parent div.

To prevent the overlay from exceeding the image size, you should use calc(100% - 20px) for both the width and height of the overlay.

Additionally, adjust the positioning and zIndex of the text accordingly. Check out the example here https://codesandbox.io/s/interesting-tree-p4vwp?file=/src/App.tsx

See below for the code:

import "./styles.css";
import Head from "next/head";

export default function App() {
  return (
    <>
      <div
        className="container"
        style={{ padding: "10px", position: "relative" }}
      >
        <img
          style={{ borderRadius: "10px", width: "100%", height: "auto" }}
          src="dubai.png"
        />
        <div
          style={{
            background: "rgba(0, 0, 0, 0.5)",
            width: "calc(100% - 20px)",
            height: "calc(100% - 20px)",
            zIndex: 1,
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            borderRadius: "10px"
          }}
        ></div>
        <div
          style={{
            color: "#fff",
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            fontFamily: "Roboto",
            width: "100%",
            zIndex: 2
          }}
        >
          <div style={{ fontSize: "35px", textAlign: "center", zIndex: 200 }}>
            DUBAI UAE
          </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

Is there a way to customize the selected option in the autocomplete feature of Material UI components?

Is it possible to customize the CSS of selected options in Material UI autocomplete? Can this be achieved by utilizing the theme? ...

javascriptcssreactjsautocompletematerial-ui

HTML block failing to implement Bootstrap styling

I am struggling to integrate Bootstrap into Drupal. I have used the 'row' class for the contact ID and added col-sm-12 for title and desc, but it is not working as expected. The width of the container seems off. Also, the accordion.js script work ...

jqueryhtmlcss

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Similar Inquiry: jQuery check if image is loaded I find myself in a scenario where the following HTML structure is utilized: <div class="image"> <img class="" src="content-images/1.jpg"> <span class="slide" rel="content-images/ ...

javascriptjquerycssimage

Having trouble with the position function in JavaScript?

I'm working on creating a small game, but I've encountered some difficulties at the start. Every time I attempt to obtain the position of track or trackCont, it consistently returns x: 0, y: 0. The DIV doesn't move to the correct position w ...

javascripthtmlcss

Tips for adjusting the width of the box-shadow in CSS

I am facing a challenge with my button that has a box-shadow effect on hover. Currently, I am unsure how to adjust the width of the box-shadow effect. Here is a snapshot of my button's current appearance: https://i.stack.imgur.com/Mg0df.png

Be ...

cssbox-shadow

Adjusting the Size of Dialog Windows in Lightswitch HTML Client

When using the MS Lightswitch HTML Client, if a dialog menu option contains too many characters to fit within the length of the dialog window, the text will be cut off and replaced with (...). Is there a way to add a scroll bar or adjust the text size in ...

jqueryhtmlcssvisual-studio-lightswitchlightswitch-2013

Dropdown menu is not positioning correctly over other elements on the webpage

After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue. Please refrain from marking this question as a duplicate. The problem I am facing is that my dropdown menu is not ap ...

htmlcsssass

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

javascripthtmlcssreactjsstyled-components

CSS animation for input range slider

Is there a way to create smoother animations for the input[type="range"] element, especially when dealing with short audio files? You can check out my Codepen where I've been experimenting with solutions using a short audio file: Codepen Link I am s ...

csshtmlcss-animations

What is the best way to create a unique shadow effect for a container in Flutter?

I am facing a challenge with my screen layout that uses GridView.builder with crossAxisCount: 3. In the itemBuilder, I am returning a Container with shadows on the left, right, and bottom, but so far, I have not been able to achieve the desired outcome. H ...

cssflutterdartcontainersshadow

Is there a way to remove deleted SASS styles from the generated CSS?

Is it possible to remove markups from a generated css file using sass? For instance, in my scss file I have: body{ background:$dark; } The resulting CSS file looks like this: body{ background: #000; } If I delete that line of code in sass, what will h ...

cssionic-frameworksass

Update the font style of the navigation bar

Hey there! I recently downloaded a template from this website: . However, I'm facing an issue with the nav bar displaying strange fonts when using Vietnamese letters. For example, "Nước" shows up as all uppercase and the letters "uo" are shortened. ...

htmlcssnavbar

Customizing a responsive background image within a div using Bootstrap 3

Is there a way to style the background image of my header div like the one featured on Mr. Bill Gates' website at ? I noticed that the height of Mr. Bill Gates' header background image remains consistent, even on smaller screens. I've atte ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to showcase a div on top of all other elements in an HTML page?

As a newcomer to html and css, I have successfully created a div that contains city names. The issue I am currently facing is when I click on a button to display the div, it gets hidden behind the next section of my page. Take a look at the image below for ...

javascriptjquerycsshtml

Container that displays vertical scroll while permitting floating overflows

Is there a way to set up a container so that when the window size is too small, it displays a scroll bar to view all elements that don't fit in one go? At the same time, can the child containing floating elements be allowed to extend beyond the bounda ...

cssreactjstypescriptmaterial-ui

Guide for positioning all navbar items except one to the left, beginning at the left edge, utilizing a set minimum and maximum width, while moving the final item to the right edge

Is there a way to align all items in a navbar except for one to the left, with a fixed combined minimum and maximum width of 300px-400px, while sending the last item to the right margin? I want the final result to resemble this: https://i.stack.imgur.com ...

htmlcss

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

javascripthtmlcssweb-applicationsvue.js

Vertical and floating alignment

Can you help me with this HTML/CSS challenge? User: Support: Emily Johnson Alex Roberts I am looking to have two input boxes aligned vertically on both the left and right ...

csscss-floatvertical-alignment

Issue with the MUI Autocomplete display in my form

Recently, I started using Material UI and Tailwind CSS for my project. However, I encountered an issue with the Autocomplete component where the input overlaps with the following DatePicker when there is multiple data in the Autocomplete. I have attached a ...

csstypescriptnext.jsmaterial-uitailwind-css

Is it possible to adjust positioning using just CSS?

I'm attempting to arrange these elements as shown in the image below: https://i.stack.imgur.com/tWy1I.png https://jsfiddle.net/ut1mgcLb/ HTML <div class="object1"> <div class="snax-voting-container-body"> ...

htmlcss