0

How can i place an img into the bottom of this code so it shows underneath? with an opacity of the grey on top and then text on top overall.

I need the height to be auto though on all divs because the text will need to be edited in a cms. Currently it holds a background image, because i cant figure out how to use an img.

Code below:-

            <div class="underlay">
                <div class="overlay"></div>
                    <div class="main">
                    <div class="container">
                        <div class="row">
                            <section class="span10 information"><!-- Editable Content -->
                                <h1>Lorem ipsum dolor sit amet</h1>

                                <div class="span5 alpha">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur augue odio, sit amet porta magna consequat eu. Nunc viverra tempor turpis a gravida. Vestibulum sed nibh a lorem viverra iaculis.</p>
                                </div>

                                <div class="span5 omega">
                                <p>Proin ultrices felis sed iaculis convallis. In pharetra rutrum elit quis varius. Donec egestas consequat dui, vel posuere massa cursus quis. Maecenas vulputate, augue vitae sagittis molestie, ipsum neque rhoncus turpis, sit.</p>
                                </div>

                            </section><!-- End of Editable Content -->
                        </div>
                    </div>
                </div>
            </div>

CSS:-

            .container {margin:0 auto; width:960px}

            .underlay {width:100%; z-index:0; position:relative; text-align:center; height: auto; padding:0 0 50px 0; background:url(../img/backgrounds/competitors.jpg) no-repeat center top;}
            .overlay {width:100%; height:100%; background:url(../img/backgrounds/block.png); display:block; z-index:2; position:absolute; clear:both}
            .main {width:100%; padding:34px 0 0 0; z-index:3;  position:relative; text-align:left;}
            .main h1 {font-family: 'Gotham A','Gotham B','Open Sans',sans-serif; font-style: normal; font-weight: 900; font-size:40px; color:#fff; margin:0 0 32px 0;}
            .main p {line-height:26px; font-size:13px; color:#fff;}
            .main .information {margin:15px 0 30px 0;}
karen Hunter
  • 53
  • 8

1 Answers1

0

I think this trick can helps you (Use virtual element equal to original one using :after)

.underlay::after {
  content: "";
  background: url(../img/backgrounds/competitors.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
Janaka R Rajapaksha
  • 3,585
  • 1
  • 25
  • 28
  • Thanks, but i need an img file instead of a background image because it needs to be edited in a cms. So the client can add images at will. Obviously this code is before integration. The client can not edit or upload images via css. So no BG images. – karen Hunter May 29 '14 at 11:39
  • @karenHunter What? css just for styling. your php scripts will let user to edit, upload the image to respective folder, and so on. then rename it via the script to competitors.jpg after it was uploaded. That's all. – Janaka R Rajapaksha May 29 '14 at 11:48