要为标题背景图片设置媒体查询，可以使用CSS的@media规则。下面是一个示例代码，展示了如何根据不同设备尺寸为标题背景图片应用不同的样式：

HTML代码：

  


  
Hello World

CSS代码（style.css）：

.title {
  background-image: url("background.jpg");
  background-size: cover;
  background-position: center;
  height: 200px;
  text-align: center;
  color: white;
  font-size: 24px;
}

/* 媒体查询 */
@media (max-width: 768px) {
  .title {
    background-image: url("background-mobile.jpg");
    height: 150px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .title {
    background-image: url("background-small.jpg");
    height: 100px;
    font-size: 14px;
  }
}

在这个示例中，我们有三个不同尺寸的背景图片（background.jpg，background-mobile.jpg和background-small.jpg），并为不同的设备尺寸应用不同的样式。

@media规则用于指定不同的媒体查询条件。在示例中，我们使用了两个媒体查询条件：

1. 当设备宽度小于等于768px时，应用@media (max-width: 768px)的样式，包括使用background-mobile.jpg作为背景图片、减小标题高度和字体大小。
2. 当设备宽度小于等于480px时，应用@media (max-width: 480px)的样式，包括使用background-small.jpg作为背景图片、进一步减小标题高度和字体大小。

通过使用@media规则和不同的媒体查询条件，我们能够根据不同设备尺寸为标题背景图片应用不同的样式。