Background image difficulties

https://codepen.io/md9453201/pen/bGNWWOM I have tried many things to get a background image for my survey form. Even copying other peoples’ work. I read in one post how it’s covered in basic html and CSS but have been over the challenges several times and failed to find it. I have looked it up online too, several times. I am so stuck.

the challenge of how to add a background image with css is this one:

https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image

documentation on background image using css can be found here:

@bonheur,hello!

The reason you’ve being struggling with background on this project is because you have redundant main tag inside your pen.

To solve your problem, try to move on styling for #main selector to the top of the css section,it should work.
Hope this helps :slight_smile:

now looking at your code the issue seems to be your syntax
try using the Analyze CSS tool offered by codepen, fix the error and it will work

hint: it is a wild bracket

Where is Analyze CSS tool !? I will look up wild bracket. No idea what it is. Thank you.

this tool here:
image

the wild bracket is a bracket that escaped, and shouldn’t be there.

This is the error:
image

Thank you for your patience! New knowledge and very helpful, but I’m still not getting it. What does unexpected want me to do? and what is unexpected?

unexpected means that it shouldn’t be there

notice that you have

#survey form {
   ...
}


}

what’s that second } doing?

Thank you! I took out a redundant main tag but nothing happened.

After you fix the CSS I suggest you work on solving the errors for the html:

HTML Inspector warnings:

  • The ‘action’ attribute is required for elements.
  • The <div-class=“form-group”> element is not a valid HTML element.
  • The <div-class=“form-group”> element is not a valid HTML element.
  • The <div-class=“form-group”> element is not a valid HTML element.
  • The <div-class=“form-group”> element is not a valid HTML element.
  • The <div-class=“form-group”> element is not a valid HTML element.
  • The ‘cols’ attribute is required for <textarea> elements.
  • The ‘rows’ attribute is required for <textarea> elements.

I had found this before but I don’t want a linear-gradient. Just the image.

there are many examples in that page, many doing exactly what you want.

That is copied straight from the example of a survey form on codepen.

I just deleted that wild } and tada!! there is the bg img. Thank you. THANK YOU. This paying attention to detail is completely reorganizing my mind.