CODEWITHSUNDEEP
htmlcss
KnowNothing
KnowNothing

Reputation: 37

How do i remove brightness after adding background-image?

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;
    
}

enter image description here

Upvotes: 0

Views: 91

Answers (2)

Authentic Science
Authentic Science

Reputation: 848

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.sstatic.net/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>

Upvotes: 2

Faith Akintoye
Faith Akintoye

Reputation: 36

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

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

Upvotes: 0

Related Questions