I have a background image covering the whole page of a homepage I'm working on and want the user to be able to see the bg image through the content. I have cards as columns on the page and have set them to 0.8 opacity. The problem I'm having is that this opacity also applies itself to any images contained within the card body. IE you can see the background image through them.
I've tried making the <img>
tag have opacity 1, making the actual image have opacity 1 and putting the image in its own <div>
with opacity 1. I also tried using the style attribute but also with no joy. Can't find anything on Google or Stack Overflow.
// CSS
// Translucent foreground
.card.t-lucent {
opacity: 0.8;
}
// Home full body background
.home-bg {
background: url(img/bg/world-war-ii-60541_1920.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
// Newspaper
.newspaper {
font-family: 'Belgrano', serif;
}
// HTML
<body class="{{ request()->path() }}-bg">
<div class="card t-lucent newspaper">
<div class="card-body">
<h1 class="card-title text-center display-4">
Welcome!
</h1>
<img class="img rounded float-left mr-3 opq-img" src="{{ asset('img/ww1_soldier_statue.jpg') }}" alt="WW1 soldier statue" />
<p class="card-text">some text some text some text some text some text some text some text some text some text</p>
<p class="card-text">some text some text some text some text some text some text some text some text </p>
</div>
</div>
</body>