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.
4 Likes
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
