1
\$\begingroup\$

I'm currently converting a PSD to a web template and attempting to overlap content and I'm running into a issue with the 3rd section because there is more padding than the first overlap and using the CSS style background-color covers wherever there is a block element but if there isn't anything in the pace a image takes priority.

I have a link to the github page where it is live in it's current state

The phone image is above the background color of the next section, I've tried using z-index but it still seems to take priority over the next section. Does anyone know a css trick or the proper method to do this overlap like in the previous section I've overlapped the content.

Here is some of the HTML code

<section class="second-section">
    <div>
        <div class="container">
            <div class="row">

                <div class="col-sm-7 content">
                    <img src="images/second_phone_section.png" alt="Second iPhone image"/>
                </div>

                <div class="col-sm-5 content">
                    <h3>DESIGN</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assume consequatur deleniti eligendi eos, expedita fugit maxime, natus nostrumas officia <b>officiis quisquam quos</b> repellendus verit verodasdfudgera voluptate. Nihil, perspiciatis puth.</p>
                    <button class="button" type="submit">GET STARTED</button>

                    <p>01/05 <br>
                    <i class="fa fa-angle-left"></i> &nbsp; &nbsp; <i class="fa fa-angle-right"></i>
                    </p>
                </div>

            </div>
        </div>
    </div>
</section>

<section class="third-section">
        <div class="container">
            <div class="row">

                    <div class="col-sm-3 text-center content">
                        <img src="images/camera_green.png" alt="Camera Image"/>
                        <h3>OUR COMMUNITY</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>

                    <div class="col-sm-4 content">
                        <img src="images/third_row_van.jpg" alt="Van Image"/>
                    </div>

                    <div class="col-sm-4">
                        <img src="images/third_row_branches.jpg" alt="Branches Image"/>
                    </div>

                </div>
            </div>
</section>

The CSS

/* ================== SECOND SECTION =================== */

.second-section {
    background-color: #FFF;
    margin-top: -300px;
}
.second-section .content {
    background-color: #FFF;
    padding-top: 150px;
}

.second-section h3 {
    word-spacing: 5px;
    letter-spacing: 2px;
    line-height: 1.25em;
    color: #16a085;
}

.second-section img {
    z-index: -10;
}

.second-section p {
    font-size: 1em;
    line-height: 2em;
}

.second-section p:last-of-type {
    padding-top: 50px;

}
.second-section i {
    font-size: 2em;
    font-weight: bold;
}

/* ===========================  THIRD SECTION =========================== */

.third-section {
    background-color: #f5f6f7;
    margin-top: -150px;
    padding-top: 150px;
    z-index: 10;
}
.third-section .content {
    background-color: #f5f6f7;
}

.content {
    background-color: #f5f6f7;

}

Essentially I'm just using margin to pull the next section up and overlap the previous section. If someone knows of a better way that's utilizing bootstrap or pure CSS that would be great but i've tried several different things.

\$\endgroup\$
1
\$\begingroup\$

Shortly after the post I found out that also adding a background color to individual block elements and applying padding to both top & bottom will actually stretch out the background-color and allow of the use of margins to cover other elements like so

.grayBG {
    background-color: #f5f6f7;
    padding-top: 100px;
    padding-bottom: 100px;
}

and

.whiteBG {
background-color: #FFF;
padding-top: 150px;

}

then with the use of a -margin I was able to pull sections to overlap each other like so.

.second-section {
background-color: #FFF;
margin-top: -300px;
padding-bottom: 0;

}

There is probably a better and more efficient way of doing this but, this seemed to work for me just fine.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.