Geek Answers Handbook

How can I set only a background image transparent with HTML and CSS?

Hi, I want my background image to be transparent and the rest not to be inside! I can do it? I work with bootstrap ...

here is the split of my html

<!-- Startseite Section -->
    <section id="startseite" class="start-section">
        <div class="container">
            <h1><span style="opacity: 1.0;">Interne Links</span></h1>

            <div class="row">
                <div class="col-lg-12">
                    <section id="Startseite" class="pfblock">

                            <div class="row">

                             ....//Here are Elements how text and divs 

                            </div>

                    </section>
                </div>
            </div>
        </div>
    </section>

The following is a snippet of CSS:

.start-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    /*background: #fff;*/
    background-image:url('../img/bg.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0.7;
}

Info: Transparency 0.7 works, but then I get all transparent :(

+4
source share
2 answers

There is no CSS opacity property of CSS, but you can fake it by inserting a pseudo-element with regular opacity, the exact size of the element behind it.

You can add

.start-section::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;   
}
+4
source

.start-section, . .7 .start-section div , .

+1

More articles:


All Articles