Could not use opacity on my background-image

Question

Just trying to make my background image with opacity but still be able to see text normally and write on it, I found ways to see text but can't write on it and when it works to see text and write on it, it was only half the screen or the background image didn't cover everything so I am just trying to see if I can find some help here.

* { margin: 0; padding: 0; }

/* Centering */
body
{
    text-align: center;
}

/* Title Size and Font */
#title
{
    font-size: 40px;
    font-family: Mv Boli, sans-serif, arial;
}

/* Description Size and Font */
#description
{
    font-size: 20px;
    font-family: Mv Boli, sans-serif, arial;
}

/* Background Image */
.background-image
{
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      z-index: -5000;
      background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
      background-repeat: no-repeat;
      background-size: cover;
}

/* Survey Form Styling */
#survey-form
{
    background: hsl(204, 94%, 65%);
    max-width: 500px;
    margin: 50px auto;
    padding: 25px;
}

<body>
  <h1 id="title">Survey Form for Tech</h1>
  <p id="description">Help us improve your experience!</p>

  <!-- Background Image -->
  <div class="background-image"></div>

  <!-- Survey Form -->
  <form id="survey-form">
      <div class="form-flow">
          <label for="name" id="name-label">Name</label>
          <input id="name" type="text" required="" placeholder="Enter your name">
      </div>
  </form>
</body>

All solved I had 2 URL to the image, so they would conflict.

Updated Situation

Added the HTML part now on the code post. – Tiago Jul 13 '21 at 03:08 — Tiago, Jul 13 '21 at 03:08

user3733831 · Answer 1 · 2021-07-13T03:42:58.773

1

In this case, you can your ::after pseudo-element for your background image and opacity.

* {
  padding: 0;
  margin: 0;
}

.background-image{
  Position:fixed;
  Top: 0;
  Bottom: 0;
  Width: 100%;
  Height: 100%;   
}

.background-image:after {
  position: absolute;
  content: '';
  background: url('https://via.placeholder.com/150/0000FF/808080') no-repeat center center / cover;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

#survey-form {
  //background: hsl(204, 94%, 65%);
  background: red;
  padding: 0; 
  margin: 50px auto; 
  position: absolute; 
  z-index: 1; 
  width: 500px;
  height: 300px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
}

<div class="background-image">
    <div id="survey-form">
      <p>Text 1</p>
    </div>
  </div>

edited Jul 13 '21 at 03:42

answered Jul 13 '21 at 02:56

user3733831

2,886
9
36
68

Yeah, thanks tried that also but does not show opacity and does not cover the full page. – Tiago Jul 13 '21 at 03:09
Check my updated code – user3733831 Jul 13 '21 at 03:12
Hey again, it show's up the survey body with red background but the whole page background does not apply the opacity so just stays as regular background and still not covering the whole page. – Tiago Jul 13 '21 at 03:26
I updated second code snippet... try it. It should work – user3733831 Jul 13 '21 at 03:37
Ok nice it covers the whole page now just need the opacity to work on it, tried 0.5 on opacity instead of 10 but didn't change anything, any clues ? – Tiago Jul 13 '21 at 03:48
From my end, that `opacity` is working – user3733831 Jul 13 '21 at 03:55
Make sure you are using your original image. here in my example I am using a placeholder image. – user3733831 Jul 13 '21 at 03:59

chanrlc · Accepted Answer · 2021-07-13T04:36:58.710

It shows the background opacity.

In your css style, please put it lower case .

https://jsfiddle.net/ru8bz7y3/2/

* { margin: 0; padding: 0; }

body
{
    text-align: center;
}

/* Title Size and Font */
#title
{
    font-size: 40px;
    font-family: Mv Boli, sans-serif, arial;
}

/* Description Size and Font */
#description
{
    font-size: 20px;
    font-family: Mv Boli, sans-serif, arial;
}

/* Background Image */
/*background-image:after 
  {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(Tech.jpg);
    opacity: 0.25;
  }*/

.background-image
{
    position: fixed;
    top: 0;
    bottom: 0;   
    width: 100%;
    height: 100%; 
    opacity: 0.25;
    z-index: -5000;
    background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Survey Form Styling */
#survey-form
{
    background: hsl(204, 94%, 65%);
    max-width: 500px;
    margin: 50px auto;
    padding: 25px;      
}

<body>
  <h1 id="title">Survey Form for Tech</h1>
  <p id="description">Help us improve your experience!</p>

  <!-- Background Image -->
  <div class="background-image">

  </div>

  <!-- Survey Form -->
  <form id="survey-form">
      <div class="form-flow">
          <label for="name" id="name-label">Name</label>
          <input id="name" type="text" required="" placeholder="Enter your name">
      </div>
  </form>
</body>

Try the url below, it shows opacity 0.25 in background and form can be edited. https://jsfiddle.net/tz013ayd/1 — chanrlc, Jul 13 '21 at 04:17
I have changed added "background-image: url" https://jsfiddle.net/ru8bz7y3/ — chanrlc, Jul 13 '21 at 04:24
don't need background-image:after. css background-size should be cover — chanrlc, Jul 13 '21 at 04:34
Hey, thanks for everything it's working properly now :) The covering page issue was due to not having margin 0, and the not be able to type was due to z-index, also the fact it covered the whole page but didn't used the full image was because of two conflicting URL one on the HTML and the other on CSS, all good now. — Tiago, Jul 13 '21 at 13:29

Could not use opacity on my background-image

2 Answers2