Overlay Data Onto Background Image

How to add a color overlay to a background image?

I see 2 easy options:

multiple background with a translucent single gradient over image
huge inset shadow

gradient option:

html {
  min-height:100%;
  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
}

shadow option:

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

an old codepen of mine with few examples

a third option

with background-blen-mode :

The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
  background-size:cover;
  background-blend-mode: multiply;
}

How to add overlay to background image

You could nest two blocks together, one with the background image, and the other with the overlay :

.background{  width: 500px;  height: 500px;  background: url('https://static1.squarespace.com/static/56be46d2a3360cae707270a0/t/5772ef9b20099e38818859b0/1467150245253/');  background-size: cover;}
.overlay{  width: 500px;  height: 500px;  background-color: rgba(0, 0, 0, 0.5);}

<div class="background">  <div class="overlay">    <!-- Content here -->  </div></div>

How to style background image and overlay content above

Quick and dirty

Add an id="bg-image" attribute to the img tag in question and apply the following CSS:

img#bg-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

The crucial part is that #bg-image is assigned a position property since z-index is only applied to elements that have position set.

The right way

You should consider either setting a background-image attribute on the container via JS or dynamically add a class to the container element via JS. I.e.:

<section id="weather-wrapper" class="container-fluid"> would become <section id="weather-wrapper" class="container-fluid sunny">) if it is sunny at the location in question. The background image would be predefined in CSS accordingly, i.e.

#weather-wrapper.sunny {
    background-image: url(images/sunny.png);
}

#weather-wrapper.rainy {
    background-image: url(images/rainy.png);
}

/* etc. */

Adding an overlay background to image not responding properly

You need to position your overlay relative to it's parent.

Then, your parent has padding:10px set. That means that the image will be smaller ( won't cover the whole div ) by 20px width and 20px height. But the overlay will cover the whole div. From there you see ' the border around the image ' as you state in your comments. Which in fact it's just empty space made by the 10px padding on parent div .

So, you have to make your overlay smaller to not exceede the image . For that you should use calc(100% - 20px) for both width and height of the overlay.

The positioning and zIndex of the text have to be changed as well.
Take a look here https://codesandbox.io/s/interesting-tree-p4vwp?file=/src/App.tsx

Code below

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>
    </>
  );
}

Making a color overlay with body image background

Use the background CSS property, here's an example.

body {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

Credit: https://css-tricks.com/tinted-images-multiple-backgrounds/

background image with overlay css

you can use this code

HTML

<div id="wrapper">
    <img src="image-file" alt="Sample Image">
    <div class="overlay"></div>
</div>

CSS

#wrapper {
    position: relative;
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
}