11

I am basically trying to create this:enter image description here

Added a parent container with a background image,then a child container that needs to be transparent.

Here my HTML:

<div class="scent-brand-contact">
    <div class="scent-brand-container">               
       <section id="black-studio-tinymce-8" class="widget-1 widget-first widget-odd widget widget_black_studio_tinymce">
            <div class="textwidget">
                <p>All our fragrances are developed in compliance with the International Fragrance Association ensuring strict adherence to safety purity and manufacturing standards.</p>
                <p>LEARN MORE ABOUT HOW SCENT BRANDING CAN BENEFIT YOUR BUSINESS</p>
            </div>
        </section>
        <section id="text-4" class="widget-2 widget-last widget-even widget widget_text">
            <div class="textwidget">
            <button type="button">contact us today</button>
            </div>
        </section>                    
   </div>
</div>

And the CSS:

.scent-brand-contact{
    position:relative;
    background-image: url(images/lemon.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    min-height:380px;
}
.scent-brand-container {
    background-color: #fff9c0;
    padding: 10px;
    opacity: 0.7;
    padding-top: 5%;
    margin: auto;
    position: absolute;
    top: 12%;
    width: 100%;
    min-height: 285px;
}

At the moment,it's happening that the button and the texts are also getting the opacity. How can I have the transparent background without affecting the text and the button?

andreas
  • 16,357
  • 12
  • 72
  • 76
Sidney Sousa
  • 3,378
  • 11
  • 48
  • 99

1 Answers1

21

You can use rgba to make only the background color transparent, e.g.:

background: rgba(255, 249, 192, 0.7);
andreas
  • 16,357
  • 12
  • 72
  • 76
  • Hi Andreas, How can we add alpha , if we are getting dynamic color as theme= #4e74f0 (hex format). and we are adding it to element as - $().css('background", theme) , $().css('opacity',0.1). Here, instead of opacity, how we can give alpha same as rgba – Mahi Apr 04 '19 at 15:35
  • 1
    Well, if browser compatibility isn't a thing, you could use alpha hex values (check [here](https://css-tricks.com/8-digit-hex-codes/) and [here](https://stackoverflow.com/a/31029864/4952806)) – andreas Apr 05 '19 at 07:20