Wanting to overlay a div over an image using flexbox - css

Question

I have a series of scaling triangles that I've arranged using flexbox, they get bigger and smaller depending on how the window is stretched. I want to have these overlay the bottom of an image to give it a sort of ripped paper or mountain peak sort of effect. The image that they will overlay scales to fit the window and the triangles must follow the image, scaling up and down with the window.
I'm having a lot of difficulty coming up with a solution to this problem and could use some help.
This is how I want the triangles and image to look and relate to one another, the triangles being black in this screenshot and the image being grey.
http://i.imgur.com/KkXq9pc.png
Here's a jsfiddle link to the project: http://jsfiddle.net/wD2r2/
CSS:
.triangle-up {
margin: 0 auto;
width: 50%;
height: 0;
padding-left:50%;
padding-bottom: 50%;
overflow: hidden;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-9999px;
border-left: 9999px solid transparent;
border-right: 9999px solid transparent;
border-bottom: 9999px solid #000000;
}
.triangle-container {
display: flex;
}
.overlay {
top: -100px;
left:0px;
right:0px;
z-index: 1;
position: relative;
margin-top: 10px;
}
HTML:
<div>
<div>
<img style="width:100%;" src="images/treeline.jpg" />
</div>
<article class="overlay">
<div class="triangle-container">
<article>
<div class="triangle-up" />
</article>
<article>
<div class="triangle-up" />
</article>
<article>
<div class="triangle-up" />
</article>
<article>
<div class="triangle-up" />
</article>
<article>
<div class="triangle-up" />
</article>
<article>
<div class="triangle-up" />
</article>
</div>
</article>
</div>
I want to avoid the effect of the triangles rising up or down or shifting along the sides of the window in relation to the image. I've been trying to get it to stay constantly running along the bottom and scaling appropriately but with no luck.
Thanks a bunch.

Answer 1

There is a bit to this, so I'll explain everything that I did in order.
1. Brown/Yellow bars' container
In order to get those two brown and yellow bars at the bottom, you need a container for them. Since there is black around them, I simply created a 100% x 40px div with a black background:
.bottom
{
background: black;
width: 100%;
height: 40px;
}
2. Create the brown and yellow bars
Since the brown and yellow bars are on the same line and are blocks, I created two inline-block elements with width 43% and one-side margins of 7%, as well as setting the proper background-color:
.brown, .yellow
{
display: inline-block;
width: 43%;
height: 20px;
margin: 20px 0 0 0;
}
.brown
{
background: brown;
margin-left: 7%;
}
.yellow
{
background: yellow;
margin-right: 7%;
}
3. Image border
Since you have that grey border around the image, I set the image box-sizing mode to border-box so that the image size would not change and I added 20px of padding to all of the sides. Then I set the background to grey to make the space around the image the right color:
img
{
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: #888;
}
JSFiddle

Answer 2

I made this flexbox text overlaying on an image
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
}
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: url(https://raw.githubusercontent.com/212mr/608m02SamsungS8/master/image/1482233503439.jpg) no-repeat 0 0;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
#media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
body {
padding: 2em;
}
<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
First, you need to make your flexbox.
Second, put the image (as a background image) into your flexbox child.
Third, put your text to overlay on the image.