Want to make text div transparent on a parallax area

Question

I am trying to make a text div transparent on a parallax area.

Here is my code:

<div class="container-fluid" style="margin-top:0px;margin_bottom:0px;background-color:#ffffff;padding:0;margin:0">
  <div class="row">
    <div class="col-md-12" style="background-image: url('http://localhost:8000/images/pages/parallax/1561656567.jpg');min-height: 500px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;">
    </div>
    <div class="container">
      <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;min-height:500px;background-color:rgba(255,255,255,0.1);color:#000000;">
        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>

        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>
      </div>
    </div>
  </div>
</div>

The lower container's background colour is always coming up as solid.

Thanks in advance!

The lower container is a child of that `div.container-fluid` element, whose background color is set: `background-color:#ffffff;` The lower container may be transparent, but what you see beneath it is that parent element with a solid background. — CoryCoolguy, Jul 02 '19 at 16:34
Thanks. The problem seems to be something to do with Bootstrap. Looking at their css I found that there is a definition in container-fluid of `background-color: #fff;` so I removed it. I can't see anywhere that the body is set to white but it still does not work. — Jim, Jul 03 '19 at 09:46
Hunting around I found that something similar has been queried before, but with no answer. https://stackoverflow.com/questions/24855438/transparent-bootstrap-panel — Jim, Jul 03 '19 at 09:49
You can make it transparent by adding `background: transparent;` or `background: rgba(x, x, x, 0);` (where x is any integer). [Check this out](https://codepen.io/anon/pen/QXVBPp) — vrintle, Jul 06 '19 at 08:12

score 2 · Answer 1 · edited Jul 09 '19 at 12:14

Try this, I hope this is what you are looking for

      body {
          background: #e5e5e5;
          padding:0px;
          margin:0px;
        }

        <div class="container-fluid" style="margin-top:0px;margin_bottom:0px;background-color:transparent;padding:0;margin:0">
          <div class="row">
            <div class="col-md-12" style="background-image: url('https://cdn.shopify.com/s/files/1/0301/0065/files/fall_background_image_landscape_tree_lake_mountain_scene_web_2048x2048.jpg');min-height: 500px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;">
            </div>
            <div class="container">
              <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;min-height:500px;background-color:rgba(255,255,255,0);color:#000000;">
                <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
                  congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>

                <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
                  congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>
              </div>
            </div>
          </div>
        </div>

score 1 · Answer 2 · answered Jul 08 '19 at 11:42

Please check if this is what you are looking for:

https://codepen.io/furqanrahamath94/pen/XLxvjE

A scrollable semi-transparent div block with fixed image in the background.

Here is my modified two classes:

.image {
    background: url(http://farm6.staticflickr.com/5104/5862419072_7f9632f068_b.jpg) no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px;
    position: fixed; // <-- Making it fixed in position
    width: 100%;
}
.content {
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 0 2rem;                     // <-- Adding padding for nicer view
    background: rgba(255, 255, 255, 0.6) // <-- Semi transparent background
}

DanieleAlessandra · Answer 3 · 2019-07-06T08:32:13.847

Your problem is that the white div is not passing over the image, it is pushing the div with the image background, they are not overlapping as they are siblings with relative positions.

If you assign an image background to the container you will achieve the result you are asking for:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="margin-top:0px;margin_bottom:0px;background-color:#ffffff;padding:0;margin:0">

      <!-- background image is here, on the row -->
      <div class="row" style="background-image: url('http://lorempixel.com/400/500/sports/');min-height: 500px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;">

        <div class="container">
          <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;min-height:500px;background-color:rgba(255,255,255,0.1);color:#000000;">
            <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
              congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>

            <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
              congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>
          </div>
        </div>
      </div>
    </div>

Thanks for this but it is not quite what I want to achieve. If you look at https://codepen.io/paulomrcunha/pen/dHscj you will see what I am getting at the moment. I want the background colour of the text pan which is white (in that example) to be able to be controlled via its opacity, so in theory it could be transparent/ — Jim, Jul 07 '19 at 10:26
I see always the same problem here: your elements never overlap and it is impossible to see the background image of an element that is not there. To see the image behind you need to set background image to a parent element, not to a sibling (unless you want to use absolute positioning). Look here: https://codepen.io/DanieleAlessandra/pen/MMPjyr — DanieleAlessandra, Jul 07 '19 at 13:24
To be more clear, here is your example with only colored outline added: https://codepen.io/DanieleAlessandra/pen/VJEKmo - The green border is the limit of the div with class=image you cannot see the background image of that div outside that border. The red line is the border of the element with .content class. — DanieleAlessandra, Jul 07 '19 at 13:29

score 0 · Answer 4 · answered Jul 12 '19 at 10:09

use background image on parent div. Hope it will fix the problem.

<div class="container-fluid"  style="background-image: url('https://cdn.shopify.com/s/files/1/0301/0065/files/fall_background_image_landscape_tree_lake_mountain_scene_web_2048x2048.jpg');min-height: 500px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;" style="margin-top:0px;margin_bottom:0px;padding:0;margin:0">
  <div class="row">
    <div class="col-md-12">
    </div>
    <div class="container">
      <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;min-height:500px;color:#000000;">
        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>

        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 5 · answered Jul 12 '19 at 11:53

I think instead of giving backgroud-image to div you should give it to the body!
Also change rgba(255, 255, 255, 0.5), margin-top:50% and padding:12px of text div.

<body style="background-image: url('https://cdn.shopify.com/s/files/1/0301/0065/files/fall_background_image_landscape_tree_lake_mountain_scene_web_2048x2048.jpg');min-height: 500px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;">
<div class="container-fluid" style="margin-top:0px;margin_bottom:0px;padding:0;margin:0">
  <div class="row">
    <div class="col-md-12" >
    </div>
    <div class="container">
      <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;min-height:500px;background-color:rgba(255,255,255,0.5);margin-top:50%;padding:12px">
        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>

        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>
      </div>
    </div>
  </div>
</div>
</body>

Hope this helps!

Want to make text div transparent on a parallax area

5 Answers5