Need Image to stack on top of another within Div

Question

New to writing code and need help stacking images on top of one another.

I am trying to stack an image on top of another (that I wish to have as my background) with a right align.

<div class="container-fluid" id="special">
    <section id="fourth">
            <img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
            <img src="website/bg-services.jpg" alt="Greenteriors Moss Art" size="cover" width="100%" height="100%" id="services-background">
    </section>
</div>

I lack the CSS prowess to even attempt to write the code. What currently happens is the img-services stacks on top of bg-services with a right align. I need the first image stacked on top of the second.

Appreciate any help.

Try this solution https://stackoverflow.com/a/48484/2745294 – Sushil Mate Jul 01 '17 at 02:14 — Sushil Mate, Jul 01 '17 at 02:14

score 0 · Answer 1 · answered Jul 01 '17 at 02:23

here's a jsfiddle for an identical project with more images: http://jsfiddle.net/kizu/4RPFa/4570/ jsfiddle is a great free tool to play around with code and see how changes work out

so you'd be using an inline-block helper and setting height to: 100% and vertical-align: middle on both elements.

<div class="container-fluid" id="special">
<section id="fourth">

<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg" 
alt="Greenteriors Moss Art" width="40%" height="40%" align="right" 
id="services">
</div>

<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg" 
alt="Greenteriors Moss Art" width="40%" height="40%" align="right" 
id="services">
</div>

</section>
</div>

i've added extra div's around your elements. now you just need to add this to the css file to tell it what to do with those new divs:

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* this is required unless you put the helper span closely near the img */

    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

you'll want to play around to make it look how you want. change the height and width. prob remove the border

score 0 · Answer 2 · answered Jul 01 '17 at 02:26

0

#fourth { background-image: url('website/bg-services.jpg'); background-size: cover; }

<div class="container-fluid" id="special">
    <section id="fourth">
            <img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
    </section>
</div>

answered Jul 01 '17 at 02:26

Robert McKee

21,305
1
43
57

Now the background image will no longer show, the img-services tab is in the right place however. – Matty B Jul 01 '17 at 15:54

Need Image to stack on top of another within Div

2 Answers2