Apply semi transparent cover on background image

Question

I'm build a page that nedds a background image with a semi transparent black cover on top (rgba 0 0 0 0.5).

My initial solution was to do:

<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);">

And I though it had worked. But now that I'm developing some larger pages in the site, it appears that when I scroll down the semi transparent cover doesn't follow along:

I tried to find a solution online, but couldn't find any topics on the matter.

Does anyone have an idea of how it can be solved?

Full code (uses bootstrap5):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link href="./css/custom.css" rel="stylesheet">
    <link href="./css/navlayout.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet">

    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script defer src="./js/navlayout.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
    <script defer src="./js/crash.js"></script>

    <link rel="icon" href="./img/icon.png" />

    <title>Vegaz.bet</title>
</head>

<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);">
    <header class="top-header align-middle">
        <div class="mx-auto"></div>
    </header>
    <header class="header" id="header">

        <div class="d-flex">
            <div class="header_toggle me-3" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>
            <img style="width: 50px;" class="h-auto me-1 d-none d-sm-flex" src="./img/Logo Vegaz Bet MOEDA.png" alt="">
            <img style="width: 120px;" class="h-auto d-flex" src="./img/Logo Vegaz Bet ESCRITA.png" alt="">
        </div>

        <div id="nav-buttons" class="d-flex">
            <button type="button" class="white-bs-color fw-bold btn btn-primary me-4" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
            <button type="button" class="white-bs-color fw-bold btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registration-modal">Register</button>
        </div>
    </header>
    <div class="l-navbar" id="nav-bar">
        <nav class="nav">
            <div>
                <div class="nav_list">
                    <a href="#" class="nav_link active"> <i class="fas fa-chart-line nav_icon secondary-bs-color"></i> <span class="nav_name">Crash</span> </a>
                    <a href="#" class="nav_link"> <i class="far fa-life-ring nav_icon secondary-bs-color"></i> <span class="nav_name">Roullete</span> </a>
                    <a href="#" class="nav_link"> <i class="fas fa-dice nav_icon secondary-bs-color"></i> <span class="nav_name">Dice</span> </a>
                    <a href="#" class="nav_link"> <i class="fas fa-coins nav_icon secondary-bs-color"></i> <span class="nav_name">Heads or Tails</span> </a>
                    <hr class="bg-white border-2 border-top border-white">
                    <a href="#" class="nav_link"> <i class="fas fa-hand-holding-usd nav_icon white-bs-color"></i> <span class="nav_name">Deposit /<br> Withdrawal</span> </a>
                    <a href="#" class="nav_link"> <i class="far fa-question-circle nav_icon white-bs-color"></i> <span class="nav_name">Help</span> </a>
                </div>
            </div>
            
        </nav>
    </div>
    <div class="r-navbar invisible" id="nav-bar-chat">

        <div id="invisible-toggle-div" class="container pb-5 invisible">

            <div class="row h-20 mb-1">
                <button id="close-chat" type="button" class="position-absolute top-8 start-10 btn-close btn-close-white" aria-label="Close"></button>
                <button type="button" class="w-50 position-absolute top-7 end-10 white-bs-color fw-bold btn btn-primary"><span class="text-nowrap">Vegaz Chat</span></button>
            </div>

            <div class="row h-60">
                <div id="chatContainer" class="chat-font d-flex flex-column bd-highlight position-absolute top-15 end-5 w-90 h-75">
                    
                    <span class="time-span-chat ms-2">11:29</span>
                    <div class="card bg-field-grey text-white mb-1">
                        <span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: yellow">youranus420:</span> oi putões</span>
                    </div>
                    
                    <span class="time-span-chat ms-2">11:29</span>
                    <div class="card bg-field-grey text-white mb-1">
                        <span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: yellow">youranus420:</span> bora crash?</span>
                    </div>
                    
                    <span class="time-span-chat ms-2">11:30</span>
                    <div class="card bg-field-grey text-white mb-1">
                        <span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: purple">elon musk:</span> Olha o nome do cara kkkkk</span>
                    </div>
                        
                </div>
            </div>

            <div class="row h-10">
                <div class="bg-primary text-center position-absolute end-3 bottom-6 w-94 h-5">
                    <div class="input-group mb-3">
                        <input type="text" class="chat-font form-control" placeholder="Your message" aria-label="Message">
                        <button class="chat-font btn btn-outline-secondary" type="button" id="button-addon2">Send</button>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <!--Container Main start-->
    <div class="height-100 main-container-page">
        
        <div class="container h-100">
            <img style="display: none;" src="./img/foguete.png" alt="foguete" id="img-rocket" />
            <img style="display: none;" src="./img/explosion.png" alt="explosion" id="img-explosion" />

            <div class="row h-50 gx-0">
                <div class="col-12 col-sm-5 order-sm-1 order-2 bg-opacity-white bg-opacity-25 text-center game-top pt-4 ps-5 pe-5">
                    
                    <div class="card bg-field-grey text-white mb-3">
                        <div class="d-flex justify-content-between">
                            <button type="button" class="white-bs-color fw-bold opacity-50 btn btn-primary w-46">Normal</button>
                            <button type="button" class="white-bs-color fw-bold btn btn-primary w-46">Auto</button>
                        </div>
                    </div>

                    <div class="card bg-field-grey text-white mb-3">
                        <span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: yellow">youranus420:</span> oi putões</span>
                    </div>


                </div>
                <div class="col-12 col-sm-7 order-sm-2 order-1 bg-opacity-white bg-opacity-25 text-center game-col">

                    <div class="d-flex h-80 game-block pt-4 ps-4 pe-4">
                        <canvas class="crash-canvas" id="canvas" height="400px" width="700px"></canvas>
                    </div>

                    <div class="d-block h-35 game-top ps-3 pt-3">
                        <div class="d-flex text-white fw-bold ms-1 mb-3">
                            Last runs:
                        </div>
                        <div class="d-flex justify-content-start">
                            <span class="badge bg-primary ms-1 me-1">2.37x</span>
                            <span class="badge bg-primary ms-1 me-1">2.37x</span>
                            <span class="badge bg-primary ms-1 me-1">2.37x</span>
                            <span class="badge bg-primary ms-1 me-1">2.37x</span>
                            <span class="badge bg-primary ms-1 me-1">2.37x</span>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>

    <a class="position-absolute bottom-5 end-5 float-icon-chat" id="chatButton" role="button">
        <span class="position-absolute top-15 start-20"><i class="far fa-comment-dots" style="font-size: 40px;"></i></span>
    </a>
    <!--Container Main end-->

</body>

</html>

CSS:

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
    --top-header-top-position: 1.5rem;
    --header-height: 3rem;
    --nav-width: 68px;
    --chat-width: 100px;
    --primary-color: var(--bs-primary);
    --secondary-color: var(--bs-secondary);
    --field-gray: var(--bs-field-grey);
    --field-grey-transparency: var(--bs-field-grey-transparency);
    --white-color: var(--bs-white);
    --body-font: 'Montserrat', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100;
    --z-topbar: 101;
}

*,
::before,
::after {
    box-sizing: border-box
}

.top-header {
    width: 100%;
    height: var(--top-header-top-position);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--secondary-color);
    z-index: var(--z-topbar);
    transition: .5s;
    text-align: center !important;
}

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: var(--top-header-top-position);
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--primary-color);
    z-index: var(--z-fixed);
    transition: .5s
}

.main-container-page {
    padding-top: calc(var(--header-height) + var(--top-header-top-position) + 5rem);
    z-index: 5000;
}

.header_toggle {
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

.header_img img {
    width: 40px
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--primary-color);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed)
}

.r-navbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    background-color: var(--primary-color);
    padding: 1rem 0 0 1rem;
    transition: .5s;
    z-index: var(--z-fixed);
    padding: 1rem 0 0 1rem;
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    margin-top: 5rem;
}

.nav_logo,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem;
    text-decoration: none;
}

.nav_logo {
    margin-bottom: 2rem
}

.nav_logo-icon {
    font-size: 1.25rem;
    color: var(--white-color)
}

.nav_logo-name {
    color: var(--white-color);
    font-weight: 700
}

.nav_link {
    position: relative;
    color: var(--white-color);
    margin-bottom: 1.5rem;
    transition: .3s
}

.nav_link:hover {
    color: var(--white-color)
}

.nav_icon {
    font-size: 1.25rem;
}

.secondary-bs-color {
    color: var(--bs-secondary)
}

.white-bs-color {
    color: var(--white-color)
}

.show-left-nav {
    left: 0;
    width: calc(var(--nav-width) + 156px);
}

.show-right-nav {
    width: 100%;
}

.body-menu-pd {
    padding-left: calc(var(--nav-width) + 188px); 
}

.body-chat-pd {
    padding-right: calc(var(--chat-width) + 1rem);
}

.chat-font {
    font-size: small;
}

.time-span-chat {
    font-size: smaller;
    color: var(--white-color);
}

#chatContainer {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}

#chatContainer::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.active {
    color: var(--white-color)
}

.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--white-color)
}

.height-100 {
    height: 100vh
}

.float-icon-chat {
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-radius: 50px;
    text-align: center;
    vertical-align: middle;
    z-index: 100;
}

.coin-dropdown-item {
    color: var(--white-color);
}

.coin-dropdown-item:hover {
    color: var(--secondary-color);
    background-color: var(--field-grey-transparency);
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }
    .header_img {
        width: 40px;
        height: 40px
    }
    .header_img img {
        width: 45px
    }
    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0
    }
    .r-navbar {
        right: 0;
        padding: 1rem 0 0 1rem;
        width: 0;
    }
    .show-left-nav {
        width: calc(var(--nav-width) + 156px)
    }
    .show-right-nav {
        width: calc(var(--chat-width) + 156px)
    }
    .body-menu-pd {
        padding-left: calc(var(--nav-width) + 188px);   
    }
    .body-chat-pd {
        padding-right: calc(var(--chat-width) + 156px)
    }
}

/* Media queries for conditional borders on games */
.game-col {
    border-left: none;
}

.game-block {
    border-bottom: none;
}

.game-top {
    border-top: 1px solid var(--white-color);
}

@media (min-width: 576px) { 
    .game-col {
        border-left: 1px solid var(--white-color);
    }
    
    .game-block {
        border-bottom: 1px solid var(--white-color);
    }    
    .game-top {
        border-top: none;
    }
}

/* crash game */
.crash-canvas {
    width: 100%;
    max-width: 750px;
    border-radius: 7px;
    background-color: #0f1923;
    margin: 0rem auto 2rem auto;
  }

Had tried that already, doesn't make any difference – João A. Veiga Jan 23 '22 at 14:10 — João A. Veiga, Jan 23 '22 at 14:10

score 1 · Answer 1 · answered Jan 23 '22 at 13:40

1

Why do you don't use the CSS filter property on your background image? you can use filter: brightness(0.5); or filter: opacity(0.5); on your image to make it semi-transparent black.

more of CSS filter property: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

answered Jan 23 '22 at 13:40

omidfarzadian

71
3

That didn't work, it only made the entire page transparent, but didn't add a black cover on top of the background image – João A. Veiga Jan 23 '22 at 14:12

Aditya Singh · Answer 2 · 2022-01-23T14:34:29.750

0

Why not use linear-gradient with background-image like so

background-image: linear-gradient(rgba( 0, 0, 0, 0.5), rgba( 0, 0, 0, 0.5)), url("./img/Home e Roleta.png");

Since both color are same(rgba( 0, 0, 0, 0.5)) shades will be constant and will be part of the background-image.

edited Jan 23 '22 at 14:34

answered Jan 23 '22 at 13:57

Aditya Singh

101
6

That didn't work, the background image simply disappeared – João A. Veiga Jan 23 '22 at 14:13
Sorry, I forgot the commas in rgba(), now it should work. Also check the url for the image please. – Aditya Singh Jan 23 '22 at 14:35

Apply semi transparent cover on background image

2 Answers2