Text not showing up on top of background image

HTML-CSS
1

Hey guys!!! Really struggling here, have been playing with my code for hours to no avail. I’m trying to create a survey form but the text I’ve been creating for my title is not showing up over my background image. Can someone please help and look at my code to see if they can find the issue? I’ve linked my code below:

Survey form

Thank you in advance!!! I would seeeriously be so grateful to any advice

2

Try to use (z-index: 1) in your h1 or container

1 Like
3

Hi @luciave and welcome to the forum!

I’m not sure :: before pseudo-class applies here.

I’ve changed your code for <body> tag as follows and it works:

  body {
    background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),url("https://img.pixers.pics/pho_wat(s3:700/FO/20/19/71/75/3/700_FO201971753_e703d7d24ca58361029be729e8a98113,700,467,cms:2018/10/5bd1b6b8d04b8_220x50-watermark.png,over,480,417,jpg)/stickers-man-wearing-virtual-reality-headset-abstract-vr-world-with-neon-lines-vector-illustration.jpg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

Here’s an article on ::before on MDN :wink: ::before (:before) - CSS: Cascading Style Sheets | MDN

1 Like
4

Hi @tori-pak !! Thank you so much! Just applied the changes and it looks great, only problem is that now it won’t apply the gradient feature. The only way I’ve gotten the gradient to work so far is by inputting the :: before pseudo class oddly enough. What should I do?

5

Also, now the background image won’t cover the entirety of the screen on mobile phone :confused:

6

Anytime! :slight_smile:
Try changing the height to 100vh:

  body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ), url("https://img.pixers.pics/pho_wat(s3:700/FO/20/19/71/75/3/700_FO201971753_e703d7d24ca58361029be729e8a98113,700,467,cms:2018/10/5bd1b6b8d04b8_220x50-watermark.png,over,480,417,jpg)/stickers-man-wearing-virtual-reality-headset-abstract-vr-world-with-neon-lines-vector-illustration.jpg.jpg");
    background-size: cover;
  background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}
7

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