Html 如何使用CSS使图像的这两个部分对齐

我已经为此挣扎了几天，所以非常感谢您的帮助

我使用一个网格演示将文本块放在背景图像上。顶部的图像需要与页脚中的图像对齐，但当前未对齐

完整的标记可以在这个代码笔中看到，但这里是显示问题的相关部分

---

你为什么不直接用背景图片呢？谢谢-两者都是背景图片（我编辑了这个问题就是这么说的）。它们是独立的图像，我不确定我是否能得到覆盖所有内容的背景。

<div class="image">
<div class="row">
<div class="incolumn column-3">Welcome to the
<h4>Austin - The depths of hell</h4>
</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-3">Lorem Ipsum Dominus fobiscum add some spirit 220. Won't you eat my sleazy pancackes just like saintly Alphonso. The quick red fox jumped over the lazy brown dog. <!-- Ocean on the east and bisected by the Chesapeake Bay, one of the world’s great estuaries. -->  </div>
<div class="incolumn column-3 invisible">&nbsp;</div>
<div class="incolumn column-6">As a result Hell  boasts a hot steamy sauna of lava longer than the state of California. We also have some rare historical areas, such as and purgatory and limbo, that provide hours of laughter for the dark angel Satan. We can often be found lounging with our friends by the lava pool drinking Ale and Mead. We find that those are the best drinks for driving away demons. To demonstrate the bankrupt richness that can be found in urban cities, we point you to Austin Texas. Our diversity offers some of the best camaraderie on the sister planett!!</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-5 invisible">&nbsp;</div>
<div class="incolumn column-7">To use this dungeon guide, start by selecting a scullion and explore the various clusters of mining sites. <span style="color: yellow">Changing The length of this content affects the size of the gap! Try it yourself and see. It is totally weird (like Austin). I kid you not I kid you not I kid you not I kid you not I kid you not I kid you not I kid you not I kid you not I kid you not I kid you not</span></div>
</div>
<!-- row --><!--
<div class="row"><div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<p>-->
<!-- row --><div class="row">
<div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<!-- row -->

    /*------------------------------*\
    Grid System
\*------------------------------*/

.row, 
.incolumn {
    box-sizing: border-box;
}

.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

.incolumn {
    position: relative;
    float: left;
}

.incolumn + .incolumn {
    margin-left: 1.6%;
}

.column-1 {
    width: 6.86666666667%;
}

.column-2 {
    width: 15.3333333333%;
}

.column-3 {
    width: 23.8%;
}

.column-4 {
    width: 32.2666666667%;
}

.column-5 {
    width: 40.7333333333%;
}

.column-6 {
    width: 49.2%;
}

.column-7 {
    width: 57.6666666667%;
}

.column-8 {
    width: 66.1333333333%;
}

.column-9 {
    width: 74.6%;
}

.column-10 {
    width: 83.0666666667%;
}

.column-11 {
    width: 91.5333333333%;
}

.column-12 {
    width: 100%;
    margin-left: 0;
}

@media only screen and (max-width: 550px) {
    .column-1, 
    .column-2, 
    .column-3, 
    .column-4, 
    .column-5, 
    .column-6, 
    .column-7, 
    .column-8, 
    .column-9, 
    .column-10, 
    .column-11, 
    .column-12 {
        width: auto;
        float: none;
    }

    .incolumn + .incolumn {
        margin-left: 0;
    }
}

/*------------------------------*\
  IMAGE STYLES
\*------------------------------*/
.incolumn {
    background: #1471E3;
    border: none; 1px solid #ccc;
    border-radius: 4px;
    color: #222;
    padding-top: 5px;
    min-height: 30px;
    text-align: center;
}

/* fixes small odd-colored area on the left side of the front page */
div#main.clearfix {
   background: #1471E3;
}
/*
div.field-items {
  max-height: 540px;
}
*/
.invisible {
  /* background-color: blue; */
  border: none;
  opacity: 0;
}  

.row {
    margin-bottom: 10px;
}

.row:last-child {
    margin-bottom: 0;
}

.incolumn .column {
    color: #eee;
    background: background-color: #1471E3;
    border: none;
    /* border-color: #000; */
}
/************
Image Class w/ Osprey background
and footer
************/
.node {
  margin-bottom: 0;
  padding: 0;
}
.image {
  position: relative;
  background-image: url('../images/Guide_09.gif');
  background-repeat: no-repeat;
  background-color: #1471E3;
  max-width: 900px;
  max-height: 540px;
  background-size: 100%;
  background-origin: bottom left;
}
#front-footer {
  max-height: 35px;
  min-height: 35px; /* prevents footer image from disappearing! */
  max-width: 900px;
  background-size: 100%;
  background-image: url('../images/Guide_10.gif');
  background-repeat: no-repeat;
}
div.content, 
.node.node-page,
 {
  padding: 0 important!;
  margin: 0;
  border-width: 0;
}
div.region.region-content {
  padding-left: 0;
  margin-left: 0;
}
@media only screen and (max-width: 550px) {
    .row {
        margin-bottom: 0;
    }
    .incolumn {
        margin-bottom: 10px;
    }
    .row:last-child .incolumn:last-child {
        margin-bottom: 0;
    }
} /* end media query */

@media only screen and (max-width: 790px) {
  .image, #front-footer {
    background-image: none;
    background-color: #1471E3;
  }
} /* end media query */