Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

John Levy
John Levy
1,451 Points
Posted by John Levy
John Levy
1,451 Points

How to place an image behind another image?

I am trying to place a grey box behind a image. How do I got about doing that? I have attached my code that I used for the image I want to place in the front. Thanks in advance HTML

<figure id="igbodybuildingworld">
  <img class="img-circle" src="igbodybuildingworld.jpg">
  <figcaption><p class="program">IGBODYBUILDINGWORLD</p></figcaption>
</figure>

CSS

.img-circle {
    border-radius: 50%;
    }

#igbodybuildingworld{
    width:150px;
    }

3 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hi John,

This can be accomplished with CSS and the z-index property. Have a look at the MDN Docs and see if that helps you. :)

:dizzy:

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for the response. Can I do a similar thing using the figure & figcaption elements as I have used the figure & figcaption for the rest of images? Thanks

Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Possibly, that's something I've never tried. I would imagine it would run the high risk of breaking in certain browsers or systems, because figcaption is designed for text and not images. But you could try, I guess.

Personally, I would stick with using the z-index as that is what it is for.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Ok great I will stick with the z-index. How do I put two or move of these divs together if I use the z-index? I have my new code for two of the divs below- HTML

 <div class="whitebox">IGBODYBUILDINGWORLD
  <span class="igbodybuildingworld">SELECT</span> <img class="img-circle" src="igbodybuildingworld.jpg">
  <span class="bluebox">bluebox</span>
  </div>

  <div class="whitebox2">ABSMOTIVATION101
  <span class="absmotivation101">Gold box</span> <img class="img-circle2" src="absmotivation101.jpg">
  <span class="bluebox2">bluebox</span>
   </div>

CSS

.img-circle {
    border-radius: 50%;
    border:10px solid grey;
    width: 65%;
    }

.whitebox { 
 border: solid 1px;
  width: 250px;
  height: 550px;
  z-index: 1;
 background: white;
  margin: 5px 5px 10px 10px;
 }

.igbodybuildingworld {            
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: #847bf7;
  border: solid 1px;
  width: 200px;
  left: 35px;
  top: 700px;
  height: 50px;
  font-size: 22px;
  font-weight: bold;
}
.bluebox { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: #847bf7;
  width: 250px;
  left: 5%;
  top: 87px;
  margin: 400px 10px 10px -56px;
  height: 300px;
  opacity: 0.9;
}

.img-circle {
    border-radius: 50%;
    border:5px solid grey;
    width:150px;
    margin: 10px 10px 10px 42px;

}

.whitebox2 { 
 border: solid 1px;
 width: 250px;
  height: 550px;
  z-index: 4;
 background: white;
  margin: 5px 5px 10px 0px;

}
.absmotivation101{            
  position: absolute;
  z-index: 7; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 1200px;;
}
.bluebox2 { 
  position: absolute;
  z-index: 6; /* put .green-box above .dashed-box */
  background: #847bf7;
  width: 250px;
  left: 5%;
  top: 87px;
  margin: 1000px 10px 10px -56px;
  height: 300px;
  opacity: 0.9;
}

.img-circle2 {
    border-radius: 50%;
    border:5px solid grey;
    width:150px;
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

To be honest, John, CSS and design are my weakest skills. I deal most with Backend Languages. I really don't have an answer for this one.

If you start a new thread with this question, you will probably get a much more CSS experienced person being able to help you troubleshoot. This will also give other students a chance to see your project and either learn from what you are doing or be able to help you achieve what you're looking for.

I did format your code with Markdown (see the cheatsheet below) so it can be read in the Community.

Good luck, and I hope it all gets solved. :) :dizzy: