How to have a figure inside a division or section

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 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

Answer 2

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>