要保持背景元素和div图像在一条直线上，可以使用CSS中的flex布局或者grid布局。

示例代码如下：

使用flex布局： HTML代码：

CSS代码：

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.background {
  width: 200px;
  height: 100px;
  background-color: gray;
}

.image {
  width: 100px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
}

使用grid布局： HTML代码：

CSS代码：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 分为两列，每列宽度相等 */
  align-items: center; /* 垂直居中对齐 */
}

.background {
  width: 200px;
  height: 100px;
  background-color: gray;
}

.image {
  width: 100px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
}

以上代码中，container是包含背景元素和div图像的父容器，使用flex布局或grid布局来实现子元素在一条直线上对齐。background和image分别是背景元素和div图像的子元素，可以根据需求设置宽度、高度、背景颜色或者背景图片等样式。