0

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

Improve this question
2
  • Where is your HTML? Commented Jul 13, 2021 at 2:50
  • Added the HTML part now on the code post. Commented Jul 13, 2021 at 3:08

2 Answers 2

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Yeah, thanks tried that also but does not show opacity and does not cover the full page.
Check my updated code
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.
I updated second code snippet... try it. It should work
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 ?
|
0

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>

Improve this answer

5 Comments

Tried that the image does not cover the full page.
Try the url below, it shows opacity 0.25 in background and form can be edited. jsfiddle.net/tz013ayd/1
I have changed added "background-image: url" jsfiddle.net/ru8bz7y3
don't need background-image:after. css background-size should be cover
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.