要实现CSS3背景图片的响应式，可以采用以下方法：
1.使用`backgroundsize`属性配合`backgroundposition`属性来控制背景图片的缩放和位置。其中，`backgroundsize`属性可以设置为`cover`或者`contain`，来使背景图片覆盖或适应容器的大小。
```css
body
{
/*
加载背景图
*/
backgroundimage:
url('背景图片的URL');
/*
背景图垂直、水平均居中
*/
backgroundposition:
center
center;
/*
背景图不平铺
*/
backgroundrepeat:
norepeat;
/*
背景图固定，不会随滚动条移动而移动
*/
backgroundattachment:
fixed;
/*
让背景图基于容器大小伸缩或覆盖
*/
backgroundsize:
cover;
/*
或者使用
contain
*/
/*
设置一个背景颜色，以防图片加载失败时显示
*/
backgroundcolor:
464646;
}
```
2.如果需要针对不同的设备进行优化，可以使用CSS媒体查询来设置不同尺寸的背景图片。
```css
/*
对于大屏幕
*/
@media
screen
and
(minwidth:
768px)
{
body
{
backgroundimage:
url('大屏幕背景图片的URL');
}
}
/*
对于小屏幕
*/
@media
screen
and
(maxwidth:
767px)
{
body
{
backgroundimage:
url('小屏幕背景图片的URL');
}
}
```
3.另外，也可以使用CSS3的伪类选择器，如`:nthoftype()`、`::before`和`::after`等，来实现背景图片的切换效果。这通常用于在不同的元素状态或交互下切换背景图片。
例如，给每个需要切换背景图片的元素添加一个类，然后使用该类的伪类选择器来设置不同的背景图片：
```css
/*
假设每个需要切换的元素都有一个类
.bgswitch
*/
.bgswitch
{
position:
relative;
}
/*
在每个元素的伪类
:nthoftype()
中设置不同的背景图片
*/
.bgswitch:nthoftype(1):before
{
backgroundimage:
url('图片1的URL');
}
.bgswitch:nthoftype(2):before
{
backgroundimage:
url('图片2的URL');
}
/*
以此类推...*/
/*
为伪类元素设置其他样式，如尺寸、定位等，以显示背景图片
*/
.bgswitch:before
{
content:
"";
position:
absolute;
top:
0;
left:
0;
width:
100%;
height:
100%;
}
```
通过以上方法，可以实现CSS3背景图片的响应式布局，确保背景图片在不同尺寸的设备或视口下都能良好地展示。
