How do i remove brightness after adding background-image?-CodePudding

I don't even know how to describe this, excuse me. I added an image as a 'background-image' and obviously it's small, but that's ok with me as i'm just a learner. The problem is: I don't know why there's brightness on the second repeat-image and how can i remove it?

HTML:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
       <h1>Blackjack</h1>
       <p id="message-el">Want to play a round?</p>
       <p id="cards-el">Cards: </p>
       <p id="sum-el">Sum: </p>
       <button onclick="startGame()">Start Game</button>
       <button onclick="newCard()">New Card</button>
       <script src="index.js"></script>
    </body>
</html>

CSS:

body{
    text-align: center;
    font-weight: bold;
    color: white;
    background-image: url(https://st4.depositphotos.com/5134503/i/600/depositphotos_223688152-stock-photo-dark-green-poker-table-felt.jpg);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', Arial, sans-serif;
    background-size: cover;
}

h1{
    color: goldenrod;
}

#message-el{
    font-style: italic;
}

button{
    display: block;
    margin: auto;
    color: #016f32;
    background: goldenrod;
    width: 200px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    border: none;
    border-radius: 2px;
    margin-top: 5px;
    margin-bottom: 5px;
    
}

CodePudding user response：

The problem isn't brightness, it's your source image. It isn't even at top and bottom. Quick fix is to duplicate the image and flip, as I did in photoshop (see snippet). Or you could manipulate the original image in photoshop with offset, blur and clone so the bottom and top have parity so when it repeats it will be seamless.

 
   body{
    text-align: center;
    font-weight: bold;
    color: white;
    background-image: url('https://i.stack.imgur.com/U14VE.jpg');
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', Arial, sans-serif;
    background-size: cover;
}

h1{
    color: goldenrod;
}

#message-el{
    font-style: italic;
}

button{
    display: block;
    margin: auto;
    color: #016f32;
    background: goldenrod;
    width: 200px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    border: none;
    border-radius: 2px;
    margin-top: 5px;
    margin-bottom: 5px;
    
}

<!DOCTYPE html>
<html>


<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

</head>

<body>
       <h1>Blackjack</h1>
       <p id="message-el">Want to play a round?</p>
       <p id="cards-el">Cards: </p>
       <p id="sum-el">Sum: </p>
       <button onclick="startGame()">Start Game</button>
       <button onclick="newCard()">New Card</button>
       <script src="index.js"></script>


</body>

</html>

CodePudding user response：

To reduce brightness of an image, apply the brightness css function

.image {
    filter: brightness(50%);
}