In an effort to enhance the aesthetics of a website, I have been utilizing Twitter Bootstrap. One snippet of my HTML code looks like this:
<div class = 'container-fluid bg-1'>
<div id ='yield_wrap'>
<div id = 'field-wrap' style = 'height:40px;'>
<div class='form-groups'>
<input autocomplete='off' autofocus class='form-control' name='yield' placeholder='yield' type='text'/>
</div>
</div>
</div>
</div>
Here, you can see that the parent div is 'container-fluid bg-1', with "bg-1" referring to the background image optimized using the following CSS:
.bg-1{
background: url("https://loonylabs.files.wordpress.com/2014/08/peptides.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity:0.9;
}
Yet, setting the opacity of this image inadvertently affects all child elements within the container div - contradicting my intentions. Despite searching extensively for solutions (a common issue), none seem to fit my needs. A potential solution could involve utilizing a pseudo div, but implementation remains uncertain. While seemingly trivial, any suggestions or tips would be greatly valued.