0

I have a body background image <body background="img url here"> and I want to add a grayscale effect to it. Tried searching the web but couldn't find a solution. Here is my HTML and CSS

body {
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: Helvetica;
  color: rgb(255, 255, 255);
  font-size: 30px;
}

body {
  background-image: url("https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg");
  filter: grayscale(100%);
  background-repeat: no-repeat;
  background-size: cover;
}

label[for="email-label"] {
  margin-left: 120px;
  margin-right: 120px;
}

label[for="name-label"] {
  margin-left: 120px;
  margin-right: 120px;
}

label[for="age"] {
  margin-left: 350px;
  margin-right: 350px;
}

label[for="favorite-time"] {
  border-top: 6px solid white;
  margin-top: 30px;
  padding-top: 20px;
}

input[type=radio] {
  font-size: 10px;
}

h1 {
  margin: 0 auto;
  max-width: 1200px;
  text-align: center;
  border: 30px solid white;
  padding: 30px;
  border-radius: 25px;
}

p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

fieldset {
  border: 9px solid white;
  margin-left: -200px;
  margin-right: -199px;
  padding: 30px;
  border-radius: 25px;
  margin-top: 50px;
  margin-bottom: 110px;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
  font-size: 25px;
}

select {
  margin: 10px 0 0 30;
  width: 30%;
  min-height: 2em;
  font-size: 25px;
}

input,
textarea {
  background-color: #3b3b4f;
  border: 1px solid #3b3b4f;
  color: #ffffff;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
  width: 60%;
  margin: 0 auto;
  border: 5px solid white;
  font-size: 30px;
  background-color: #3b3b4f;
  min-width: 300px;
  border-radius: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Favorite Media Survey</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body background="https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg">


  <h1 id="title">Favorite Media Survey</h1>
  <p id="description">Thank you for taking the time to share your interests</p>
  <form id="survey-form" method="post" action='https://register-demo.freecodecamp.org'>
    <fieldset>
      <label for="name-label" id="name-label">Name:<input id="name" type="text" name="name-label" placeholder="Bob" required/></label>
      <label for="email-label" id="email-label">Email:<input id="email" type="email" name="email-label" placeholder="blank@blank.com" required/></label>
      <label for="age" id="number-label">Age:<input id="number" type="number" name="age" min="13" max="120" placeholder="ex.18" required/></label>
    </fieldset>
    <fieldset>
      <label for="tv-movies">Do you like movies or TV shows better?<input type="radio" value="tv-movies" id="tv-movies" name="tv-movies" >Movies</label>
      <label for="tv-movies"><input type="radio" value="tv" id="tv-movies" name="tv-movies" >TV</label>
      <label for="favorite-media">Do you like books or magazines better?<input type="radio" value="books" id="favorite-media" name="favorite-media">Books</label>
      <label for="favorite-media"><input type="radio" value="magazines" id="favorite-media" name="favorite-media">Magazines</label>
      <label for="favorite-time">When is your favorite time of the day to interact with media?<input type="checkbox" value="morning" id="Morning" name="Morning">Morning</label>
      <input type="checkbox" value="afternoon" id="Afternoon" name="Afternoon">Afternoon</label>
      <input type="checkbox" value="night" id="Night" name="Night">Night</label>
    </fieldset>
    <fieldset>
      <label for="genre" id="genre" name="genre">What is your favorite genre?</label>
      <select id="dropdown" type="dropdown" name="dropdown">
        <option value="0">(select one)</option>
        <option value="1">Comedy</option>
        <option value="2">Horror</option>
        <option value="3">Romance</option>
        <option value="4">Fantasy</option>
        <option value="5">Sci-Fi</option>
      </select>
    </fieldset>
    <fieldset>
      <label for="favorite-element">What is your favorite and why?
           <textarea id="favorite-element" name="favorite-element" rows="3" cols="30" placeholder="I really like movies the best because..."></textarea>
           </label>
    </fieldset>
    <input id="submit" type="submit" value="submit">
    <hr></hr>
    </input>
  </form>
</body>

</html>

I tried adding a filter:grayscale(60%) to the body type selector and nothing happened. Also tried wrapping the background in the body element with a <div> and giving that a class and using a class selector to apply a filter which also did not work. I had a working solution before when I added the image to the HTML using img src="" but when I did things that way I couldn't get my image to layer behind my text.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Mabe
  • 1
  • If I were you, I'd switch to CSS. The `background` attribute was deprecated back in HTML4... – Heretic Monkey Dec 30 '22 at 22:21
  • Yes to Heretic Monkey's comment. Also `body { background-image:url("https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg") filter: grayscale(100%);` so the grayscale targets the `background-image` and not the body. – N S Dec 30 '22 at 22:28
  • `
    ` and `` are void elements which means they don't have end tags, `` and `` are invalid.     – zer00ne Dec 30 '22 at 22:30

1 Answers1

0

Delete this body background tag and add in css this:

body {
  position: relative;
  height:400px; // Added only for presentation purpose
}
body::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url(https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg);
  filter: grayscale(100%);
  background-size: cover; // Added only for presentation purpose
}
<body>
</body>

This is working snippet :)

dzm11
  • 71
  • 6