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

The table is not displaying the CSS class as intended

I need to modify the behavior of a table so that upon clicking on a value, a specific class is set and the user is redirected to a particular page. The structure of the table is as follows: <?php // Determine the file name based on content type if( ...

phphtmlcss

Ensuring that two operators are not consecutively placed in a Javascript calculator-validation guide

After creating a basic calculator using HTML, CSS, and JavaScript, I encountered an issue. When validating user input, the calculator currently accepts multiple operators in a row. To address this, I attempted to prevent consecutive operators by checking ...

javascripthtml

Using Selenium Web Driver to extract information from Google's knowledge graph

Currently utilizing the Ruby Selenium web driver, my goal is to extract content from the Google Knowledge Graph located on the top right-hand side of the search results page. This element is within the <div class="xpdopen"> section. @driver = Seleni ...

javascriptcssrubyseleniumweb-scraping

Exploring the ancestors of an element

JS <script> $('.btn').click(function(e){ target = e.target; parent = target.parentNode.parentNode; console.log(parent); }); </script> HTML <div class="card" sty ...

javascriptjqueryhtml

Timer Does Not Appear to be Counting Down

I recently added a countdown clock to my website, but I'm having an issue with it not updating in real-time unless the page is refreshed. I'm not very familiar with javascript, so I found some code online and made some modifications myself to sui ...

javascripthtmlcss

Achieving Text Wrapping Around Unconventional Shapes Using CSS

I'm currently facing a challenge in getting text to wrap around an irregular shape on a web page. Despite numerous attempts, I have yet to find a solution that meets my requirements. Attached is an image illustrating the layout I am aiming for. The ...

htmlcssimage

Switch between CSS and jQuery styling

Here is a code snippet I'm using to toggle the visibility of content: $(function(){ $('#slider').css('display',''); $('#hideslider').click(function(){ $('#slider').slideToggle('slow&apos ...

jquerycssbackgroundslidetoggle

The jQuery click event is failing to trigger

I am facing an issue with some buttons that have specific classes. Here is an example: https://i.sstatic.net/CVIR2.png Each of these buttons contains JSON data stored in a data attribute. I have created a function to detect when a button is clicked and p ...

javascripthtmljqueryjquery-events

CSS - Ensuring that the height of one div extends all the way down to meet another div

I'm facing an issue with two divs in my design. One of them contains a checkbox and the other has text which can vary in size - sometimes it's small, sometimes it's large. When the text in the second div is big, the box on the left extends a ...

htmlcss

What causes the unset width or height to impact object-fit, and is there a workaround for this issue?

Query Beginnings Encountering unexpected behavior while using the value unset with the rule object-fit led me to question if there might be a rationale or workaround for this peculiar issue. Demonstration .block { &__img { width: 100%; hei ...

csssass

Adjust the tooltip image alignment to be offset from the cursor and appear at the bottom of the page

After creating a code snippet for image tooltips on text hover, I encountered an issue on my website where the bottom of the page expanded to accommodate the images. Is there a simple way to align the cursor at the bottom of the image when scrolling to the ...

javascriptjqueryhtmlcsstooltip

Instructions on adjusting the height of a flexbox container to utilize the available space

I am facing a challenge in grasping the interaction between flexbox containers and other elements on a webpage. When I have only a flexbox on my page, everything works smoothly. However, when I introduce other elements, things start acting strangely. It se ...

cssflexbox

Multiple instances of Ajax drop-down effects are now available

On my website's staff page, I have implemented a dropdown menu using AJAX to display information about each member of the staff. The issue arises when attempting to open multiple dropdown menus on the same page - the second dropdown that is opened ten ...

javascriptphpjqueryhtmlajax

An issue occurred while attempting to read words from JSON file

My current issue involves loading words from JSON into my webpage. The images are functioning properly, thankfully. I have already successfully loaded the necessary images through JSON onto my webpage. However, I am still in need of loading words through ...

javascriptjqueryhtmlcssjson

Applying CSS blur filter to container without affecting its content

I'm trying to create a hover effect where an image within a parent div transitions into a blurred state. However, I've run into an issue where if the image is set to 100% width/height of the parent div, there is a visible bezel of the parent&apos ...

htmlcssfiltercss-transitionsblur

What is the best way to enlarge a specific section of a map or image using HTML?

Can you resize a specific area of a map in HTML? ...

htmldictionaryscalearea

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width ...

javascripthtmlcssgoogle-chrome-extensionsidebar

Code snippets to reduce excess white space on a website using HTML and CSS

On my website, there are multiple tabs, each containing content from an HTML file. When a user clicks on Tab1, boxes with images are displayed. The layout can be seen in the following Code Demo: Code Demo here There seems to be extra space before and afte ...

javascripthtmlcss

Column that adjusts to different screen sizes

In the realm of responsive web design, what methods are suggested to achieve the specified CSS display? My main requirement is to have a maximum of three columns. The content should be divided evenly among these three columns. I prefer using SCSS and wel ...

htmlcss

Struggling to locate elements with Python selenium

Just starting out with Selenium and attempting to extract data from a particular website: . This site stores information on hotels across the United States. My main objective is to compile this data into a CSV file where each entry would have a 'State ...

pythonhtmlseleniumweb-scraping