How to have a figure inside a division or section - html

Question

I am trying to put various figures inside a division or a section which has a particular background color! I can not understand why the below code is not working! Please help!
<div style="algin:center;width:100%;height:auto;background-color:#212121">
<figure class="snip1197">
<figcaption>
<blockquote>Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.</blockquote>
<div class="arrow"></div>
</figcaption>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
</figure>
</div>

Answer 1

I'm not sure what you mean but you can just add some more pictures or what you want.
* {
color:white;
algin:center;
}
.test{
algin:center;
width:100%;
height:auto;
background-color:#212121;
}
.arrow{
float:left;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid green;
}
.test2{
algin:center;
width:100%;
height:auto;
background-color:red;
}
<div class="test">
<figure class="snip1197">
<figcaption>
<div class="arrow">
</div>
<blockquote>
Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
</blockquote>
</figcaption>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
</figure>
</div>
<!-- or with a figcaption for every picture and multiple figures in one div -->
<div class="test2">
<figure class="fig1">
<figcaption>
<div class="arrow">
</div>
<blockquote>
Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
</blockquote>
</figcaption>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
</figure>
<figure class="fig2">
<figcaption>
<div class="arrow">
</div>
<blockquote>
Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
</blockquote>
</figcaption>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
</figure>
</div>

Answer 2

i am guessing you want the image to blend on the background-color . you can use background-blend-mode for that. but you need to set background-color and background-image on the same element.
in the below example i used them on the div
see snippet or > jsfiddle
<div style="text-align:center;width:100%;height:auto;
background-color:#212121;background-blend-mode:multiply;
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg');
height:500px;
background-repeat:no-repeat;
background-position:center 100px">
<figure class="snip1197">
<figcaption>
<blockquote>Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.</blockquote>
<div class="arrow"></div>
</figcaption>
</figure>
</div>
P.S. 1) alignwas written wrong (algin ) and also align:center does not exist
P.S. 2) the above code is just an example. your question lacks a proper explanation on what you want to achieve