I have multiple questions related to this background

There are multiple things I would like to fix in this image. First ( Solved by @MattDESTROYER and @QwertyQwerty88 ): I would like the background to be blurred(using CSS), however I don’t know how. Second: The background needs to be scaled to fit in 100VH (i dont care about the width), however it is a little bit to high and I would like it to have 100VH, WITHOUT stretching it. Third: As you can see, it’s hard to see the text. Because it is black, along with the backgound. I’m going to see if making it inverted from the background works, however I don’t know how to do that.

                        i suck at css

To blur, you should be able to use the blur filter on the element with the background image (note, depending, you might want to have this as a separate element to any content rather than a parent element).

filter: blur(8px);
-webkit-filter: blur(8px);

For sizing the image, there’s the background-size property. You could set the size to 100vh, or set it to cover, you can read more here.


How do I make it so the text is not blurred? I can’t think of a way using a separate element that has the background without it displacing the text.

position: absolute on the text?

Did you mean position: absolute;? lol

The text didn’t get centered(because I was using flex and I didn’t add the position stuff yet) but then after a little bit the background completely disappeared and wouldn’t reappear. EDIT: i fixed everything

anyways im gonna play agar.io now while i wait for someone to tell me how to invert text

??? just set the text’s color???

1 Like

Well if it’s the only styling then it doesn’t need a semicolon (which is bad practice but still, it was just to show the key and its value so it didnt need a semicolon)

1 Like