A little help (?) and projects feedbacks

HTML-CSS
1

Tell us what’s happening:
Hello, I am new here. I feel lil’ bit nervous as I typed this :sweat_smile:.
The reason I joined freeCodeCamp is that I want to brush up on my coding/programming skills (especially in web development but not confident enough).

Anyways, I have some questions about this project from Responsive Web Design(Survey Form) , as I would like to make the image half-transparent so the users can read with ease. Uh…I hope this understands the users to solve this issue.

EDIT: Can someone please explain the use of ::before and ::after (content property of CSS) in a simple way?

Feel free to post suggestions or criticisms (don’t pull punches :sweat_smile:), thank you :slight_smile:

Here is my Tribute page for those who’re interested to provide feedback/suggestions again(although I submitted it):
https://codepen.io/Lefty99/full/gOgMLvy
Your project (link) so far
https://codepen.io/Lefty99/pen/mdRrbYg

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

2

If you use the background image element as a container you can’t set the opacity on the element without affecting the child elements inside it.

You can use an image element instead, or use a pseudo-element (i.e. ::before or ::after). Using a pseudo-element would let you keep the HTML as it is now and you can just adjust the CSS.

  1. Set the form element to be position: relative

  2. Make the .backgroundimgtest into a pseudo-element selector and use the content property to set the image.

  3. Use position: absolute, center it (top/left and transform: translate), set the opacity.

Example 
#survey-form {
  background-color: rgba(232, 232, 232, 1);
  padding: 1.5em;
  box-shadow: 12px 1px 12px 3px rgba(0, 0, 255, 0.2);
  border-radius: 5px;
  position: relative;
}

.backgroundimgtest::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: url(https://design-style-guide.freecodecamp.org/downloads/fcc_secondary_small.jpg);
  opacity: 0.2;
}
3

Looks like I need to learn on how pseudo-elements work, thank you for the time to solve this.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.