How do I fix the background covering up my header text-CodePudding

I'm trying to make this cool html and css title with rainbows dashing through it, and it works until I change the background color to any other color:

now, after I change the background color to black, it just covers it, looks like this:

Yes, the non-transparent background of the pictures is also there, I would also appreciate it if someone can tell me how to remove the white background of that through css without needing to edit it? If that's possible.

my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"/>
    <!-- Custom Font For HeaderText -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press Start 2P&display=swap" rel="stylesheet">
    <title>RPS</title>
</head>
<body>
    <div >
        <div ><h1>TEST</h1></div>
    </div>
    <div >
        <div >
            <button ></button>
            <button ></button>
            <button ></button>
        </div>
    </div>
    <div ></div>
    <script src="index.js"></script>
</body>
</html>

my css:

* {
    background-color: black;
    font-family: 'Press Start 2P', cursive;
}

.rainbowText {
    margin: auto;
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: move 35s linear infinite;
}

@keyframes move {
    to {
        background-position: 1000vh;
    }
}

.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

h1 {
    font-size: 100px;
}

.body-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
}

.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.2s;
}

.Rock {
    display: flexbox;
    margin: 10px;
    padding: 65px;
    background: #f0f0f0 url("images/moai_1f5ff.png");
    background-repeat: no-repeat;
}

.Paper {
    display: flexbox;
    margin: 10px;
    padding: 65px;
    background: #f0f0f0 url("images/roll-of-paper_1f9fb.png");
    background-repeat: no-repeat;
}

.Scissors {
    display: flexbox;
    margin: 10px;
    padding: 65px;
    background: #f0f0f0 url("images/scissors_2702-fe0f.png");
    background-repeat: no-repeat;
}

.button:hover {
    transform: scale(1.2);
  }

Yep, how do I fix this, thank you!

CodePudding user response：

use

body{
 background-color : black;
}

and try using a png with a transparent background, you can't edit the image using css ^^

CodePudding user response：

Make Background Color for body tag. Please change that it will works.

Try to use Png images with transparent Background other Use https://www.remove.bg/ this link and remove background for your images and use it but it reduces size.

Another method to remove BG is https://www.adobe.com/express/feature/image/remove-background Use this. It may give you good quality

Note: Not able to remove BG in CSS