Html “响应背景”；白板；形象

嗨，我正在尝试在网页上获得一个白板背景图像，而不必为它加载一个巨大的图像。我几乎让它工作，但在一个较小的分辨率响应版本，顶部图像断裂，导致它不是很灵敏。我怎样才能停止破坏，或者他们是更好的方法？以下是3个单独分区的css：

.mission{
  width: 100%;
  padding: 50px;
  background-image: url("images/whiteboard_strip.jpg");
  background-size: 100%;
}

.missiontop{
  width: 100%;
  height: 100%;
  background-image: url("images/whiteboard_top.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  padding-bottom: 80px;
}

.missionbottom{
  width: 100%;
  height: 100%;
  background-image: url("images/whiteboard_bottom.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 81px;
}

感谢您的帮助

编辑：HTML代码

<div class="col-sm-12 servicecolumnone startAnimation animated missiontop" data-animate="slideInLeft"></div>
                    <div class="col-sm-12 servicecolumnone startAnimation animated mission" data-animate="slideInLeft">
                        <image src="activism/images/mission.png"></image>
                        <h4><span>Our Mission</span></h4>
                        <p>To promote and advance the highest levels of professional service in the teaching profession, and to represent and advance the just cause of teachers and their collective views of Government and Educational authorities at all levels within Belize and abroad, in order to promote and achieve the best possible standards of education and quality of life for all of our people.
                        </p>
                    </div>
                    <div class="col-sm-12 servicecolumnone startAnimation animated missionbottom" data-animate="slideInLeft"></div>

我们的使命
促进和促进教师专业最高水平的专业服务，代表和促进伯利兹国内外各级政府和教育当局的教师正义事业及其集体观点，为了促进和实现我国全体人民的最佳教育标准和生活质量。

您最好使用中等图像，并将背景大小设置为

封面

而不是100%。这样，它将根据屏幕分辨率调整大小。请参见“我使用了明亮的图像来突出显示效果”

正文{
高度：100vh；
}
.使命{
文本对齐：居中；
颜色：绿色；
宽度：100%；
身高：80%；
背景图像：url（“http://www.thinkstockphotos.com.au/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg");
背景尺寸：封面；
}
missiontop先生{
宽度：100%；
身高：10%；
背景图像：url（“http://www.thehindu.com/multimedia/dynamic/01662/THSRN_THAILAND_1662101g.jpg");
背景重复：重复-x；
背景尺寸：封面；
}
.任务底部{
宽度：100%；
身高：10%；
背景图像：url（“http://www.goodlightscraps.com/content/nature/nature-images-63.jpg");
背景重复：无重复；
背景尺寸：封面；
}
h4跨度{
文本转换：大写；
颜色：深绿色；
}

我们的使命
促进和促进教师专业最高水平的专业服务，代表和促进伯利兹各级政府和教育当局的教师正义事业及其集体观点
为了促进和实现我国全体人民的最佳教育标准和生活质量。

由于您正在使用

背景图像

在某些内容周围显示边框，因此我建议切换到；例如：

.mission {
  border-image: url(--path to file--) 30 30 round;
}

其中，

30 30

指示浏览器将图像文件角落中的30px²区域视为“边框角落”。MDN文章中有一系列很好的例子，比我能更好地说明这一点

请注意，IE11是第一个支持

边框图像的internet explorer版本

如果用背景图像“填充中间”也很重要，那么使用
背景尺寸：封面
per可能会起到最好的作用。
顶部图像“断裂”导致响应不太灵敏是什么意思？此外，您是否能够提供指向正在处理的3个图像的链接？这意味着在具有“missiontop”类的div和具有“mission”类的div之间有一个空白。请注意missiontop和missionbottom类都是空的div，如果有帮助的话，这里有一个链接指向它的外观：这是一张全分辨率的图像：我想你可以看到这3张图像的渐变差异。希望它能帮上忙因为OP的图像实际上提供了边框，你需要以不同的方式处理顶部和底部，以避免会破坏视觉效果的扭曲谢谢Rachel！我要把它弄疯了！谢谢你的好例子谢谢你杰里米，我会尝试这两个建议，看看哪一个效果最好。这项工作做得非常完美，因为正如你所提到的，没有必要填满中心。谢谢！