如何使用CSS在背景上定位表格？

我需要在当前文档中移动一组表

我已经尝试过调整CSS中的边距，但似乎无法使其正确

这就是我所拥有的：

这就是我努力实现的目标：

最大宽度必须为700像素。我已经全部设置好了，除了桌子（图像）的位置需要移到背景图像上

@charset“UTF-8”；
/*CSS文档*/
身体{
边际上限：0；
填充顶部：0；
背景：#fff；
/*JTL添加-限制BB内容区内的容器最大宽度*/
最大宽度：700px；
文本对齐：左对齐；
左边距：自动；
右边距：自动；
/*结束JTL*/}
.背景图片{
背景图片：url（“image background.png”）；
高度：450px；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
边缘底部：-100px；
最大宽度：700px；
}
h1{
填充顶部：50px；
文本对齐：居中；
字体系列：“bebas neue”；
字体大小：正常；
字体大小：50px；
颜色：#fff；
}
上校欢迎你{
浮动：左；
左边距：25px；}
.col-navmenu-1{
浮动：对；
宽度：250；
身高：255；
右边距：25px；
边界半径：10px；
背景：#252525；}
氢{
颜色：#FFFFFF；
文本对齐：居中；
字号：200；
字体大小：24px；
字体系列：Gotham，“Helvetica Neue”，Arial，“无衬线”；
}
.导航按钮{
左侧填充：45px；
}
#页脚{清除：两个；文本对齐：左；填充：0 12px 2px 12px；背景：#eee；
边框顶部：1px实心#502e74}
.红线{
边框底部样式：实心；
边框底色：#502e74；
边框底宽：1px；
}
表{边框间距：0px；}/*JTL添加了整个部分*/
th，td{/*JTL增加了整个部分*/
左侧填充：5px；
右侧填充：5px；
填充顶部：0px；
垫底：0px；
}/*JTL增加了整个章节*/
a:链接{color:#502e74}
答：访问{color:#036}
a:活动{color:#502e74}
答：悬停{颜色：#000；背景：#ffc；文本装饰：无}
/*当屏幕宽度小于600像素时，隐藏除第一个（“主页”）外的所有链接。显示包含打开和关闭topnav（.icon）的链接*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:not（：第一个子项）{display:none；}
.topnav a.icon{
浮动：对；
显示：块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。该类使topnav在小屏幕上看起来不错（垂直显示链接，而不是水平显示链接）*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：相对；}
.topnav.a.图标{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}

专业发展概览模板
专业发展
概述
航行
Trevecca-Nazarene大学

帮助台支持联系人：

如果您想让您的表格覆盖其他内容，可以选择将位置更改为绝对位置，并根据需要调整顶部/右侧/底部/左侧。例如：

.col-navmenu-1{

        position: absolute;
        bottom: 20px;
        left: 500px;
        float:right;
        width: 250;
        height: 255;
        margin-right: 25px;
        border-radius: 10px;
        background: #252525;}

---

请记住，您必须调整媒体查询。

我看到的是，您的表内容超出了div class=“main content”。我建议您

通过在h1 tag Professional Development（专业发展）概述之后删除结束div，将表格内容放入class=“main content”（主内容）中

删除class=“资源内容”之前的结束div

将css.background pic重命名为。main content——这种样式将更有意义

---

但总的来说，我认为你在使用合适的div时遇到了麻烦，这在你的网站上造成了一系列麻烦，在设计过程中也让人头疼。

谢谢@iWebish，这很有效。你是否碰巧知道为什么在第二个表（div class=“resource content”）中，当宽度和高度（width=“165”height=“97”）相同时，图像的大小会不同每个图片都是一样的吗？很好，这很有帮助！我真的说不出这些图片的大小有多大。你的代码显示了这些img的相同大小的div，所以我假设在td、tr或其他表格样式中还有一些其他样式会影响到这一点。