how to set background image opacity without changing text opacity in css

Weary Wolf answered on December 13, 2023 Popularity 9/10 Helpfulness 5/10

answer how to set background image opacity without changing text opacity in css

how to set background image opacity without changing text opacity in css

Comment

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      position: relative;
      width: 100%;
      height: 300px; /* Adjust as needed */
      overflow: hidden;
    }

    .background-image {
      width: 100%;
      height: 100%;
      background-image: url('your-background-image.jpg');
      background-size: cover;
      background-position: center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .overlay {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity here */
    }

    .content {
      position: relative;
      z-index: 1;
      color: white; /* Set the text color */
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="background-image"></div>
  <div class="overlay"></div>
  <div class="content">
    <h1>Your Text Here</h1>
    <p>More text content...</p>
  </div>
</div>

</body>
</html>

Popularity 9/10 Helpfulness 5/10 Language html

Source: chat.openai.com

Tags: background-image css html opacity set text

Link to this answer
Share Copy Link

Contributed on Dec 13 2023

Weary Wolf

0 Answers Avg Quality 2/10

how to set background image opacity without changing text opacity in css

Contents

More Related Answers

how to set background image opacity without changing text opacity in css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.