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 :(
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With