How I can set the only the Background image transparent with HTML and CSS?

Question

hi i want to set my background image transparent and the rest inside not! Can I do this? I work with Bootstrap...

here is a 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>

Here is the CSS Split:

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

For Information: The opacity 0.7 works but then I get all transparent :(

Answer 1

You could add an element behind your .start-section div which would have the same dimensions, and only contain your background image. Then you could set that element to .7 opacity and have your .start-section div at full opacity to display its content normally.

Answer 2

There is no CSS property background-opacity, 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;   
}