CODEWITHSUNDEEP
htmlcss
PavelDobCZ23
PavelDobCZ23

Reputation: 31

How can I make background of div element transparent, where there's element on top?

<!DOCTYPE html>
<html>
    <style>
    body {
        color: white;
        background-image: url("https://www.icecraftstudio.repl.co/sprites/images/blue_ice.png");
        background-repeat: repeat;
        background-attachment: fixed;
        background-size: 10%
    }

    #content {
        padding: 10px;
        background-color: rgba(10, 10, 10, 0.85);
    }

    .group {
        padding: 10px;
        margin: 10px;
        border: 4px double rgb(0, 77, 177);
        background-color: rgb(0, 21, 80);
    }

    article {
        background: transparent;
        margin: 10px;
        padding: 10px;
    }
    </style>
    <body>
        <div id="content">
            <h1>Page</h1>
            <div class="group">
                <h2>Heading</h2>
                <article>
                    <h3>Article 1</h3>
                    <p>Some text</p>
                </article>
                <article>
                    <h3>Article 2</h3>
                    <p>Some text</p>
                </article>
            </div>
        </div>
    </body>
</html>

I need to make the background of the div with content id to be visible as background of article elements. However the background of the group class div is visible instead. Is there any way to make it how I want it?

Upvotes: 2

Views: 56

Answers (2)

Mohammed JABRI
Mohammed JABRI

Reputation: 71

You can move the background-image property from the "body" element to ".article", and for the dark overlay, you can use pseudo-elements for that like below :

.article {
    background-image: url("https://www.icecraftstudio.repl.co/sprites/images/blue_ice.png");
    position: relative;
}

.article::before {
    content: '';
    position: absolute;
    z-index: -99;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgb(0, 21, 80);
}

and with that done, you should have the ice background in each article with the dark overlay, and the body will remain transparent.

If this is not the result you are looking for, please consider adding more details so we can understand the problem more.

Upvotes: 2

Spectric
Spectric

Reputation: 31992

Set its background-color property to transparent:

<!DOCTYPE html>
<html>
    <style>
    body {
        color: white;
        background-image: url("https://www.icecraftstudio.repl.co/sprites/images/blue_ice.png");
        background-repeat: repeat;
        background-attachment: fixed;
        background-size: 10%
    }

    #content {
        padding: 10px;
        background-color: transparent;
    }

    .group {
        padding: 10px;
        margin: 10px;
        border: 4px double rgb(0, 77, 177);
        background-color: rgb(0, 21, 80);
    }

    article {
        background: transparent;
        margin: 10px;
        padding: 10px;
    }
    </style>
    <body>
        <div id="content">
            <h1>Page</h1>
            <div class="group">
                <h2>Heading</h2>
                <article>
                    <h3>Article 1</h3>
                    <p>Some text</p>
                </article>
                <article>
                    <h3>Article 2</h3>
                    <p>Some text</p>
                </article>
            </div>
        </div>
    </body>
</html>

Upvotes: 2

Related Questions