• Locked
No replies
Sun, 2016-07-17 07:36
md7dani
md7dani's picture
Offline
newbie
Last seen: 6 years 45 weeks ago
Timezone: GMT+2
Joined: 2013-03-13
Posts: 3
Points: 5

I'm trying to add some links in the right corner of the background image but when I do, the opacity div will move to the right. How can i fix this?

<html>
    <head>
        <style>
            .divWholePage {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                }
            .divSection {
                display: table;
                width: 100%;
                min-height: 50%;
                height: 50%;
                z-index: 0;
                }
 
         .divSection_footer {
                //display: table;
                width: 100%;
            height: 35%;
                z-index: 0;
                }   
 
            .divRandomText {
                font-family: "Average";
                font-size: 24px;
                line-height: 130%;
                padding: 15%;
                display: table-cell;
                vertical-align: middle;
                }
 
            .bottomOpacityForm {
                font-family: "Average";
                font-size: 24px;
                //line-height: 130%;
                //padding: 15%;
                display: table-cell;
                //vertical-align: middle;
                width:100%;
                vertical-align: bottom;
                height:100%;
            z-index:100;
                }
 
            .divBackgroundImage {
                height: 100%;
                width: 100%;
                position: absolute;
                right: 0;
 
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
 
                z-index: -1;
                opacity: 1;
                }
            .imgBackground {
                float: left;
                }
            </style>
        </head>
    <body>
        <div class="divWholePage">
 
            <div class="divSection">
                <div class="divBackgroundImage" style="background-image: url(IMGP0150.jpg);"></div>
 
               <div class="bottomOpacityForm">
                  <div style="background-color: white; opacity: .70; padding: 1%; border:2px solid gainsboro; ">
                     <!--An item may represent a "story" -- much like a story in a newspaper or magazine; if so its description is a synopsis of the story, and the link points to the full story. An item may also be complete in itself, if so, the description contains the text (entity-encoded HTML is allowed; see examples), and the link and title may be omitted. All elements of an item are optional, however at least one of title or description must be present.-->
 
                  </div>
               </div>
            </div>
            <div class="divSection" style="background-color: blue;">
                <div class="divRandomText">
                    Now is the time for all good men to come to the aid of their country.
 
                </div>
            </div> 
            <div class="divSection_footer" style="background-color: gainsboro;">
                <div class="divRandomText">
                    sdf sdf fsd dfdfs sdfsdfsdf sdfsdfsdfsdf ds sd  sdffsdf
                    </div>
                </div>
            </div>
        </body>
    </html>

Top
Tags: