如何为响应式网站设计背景图像？

Question

我一整天都在寻找答案或指导，但我似乎找不到任何东西。我可能在这里错过了一个关键词。

我有一个单页网站，我想在photoshop中设计背景图片。我希望能够围绕网页上的元素设计这个图像。对于一个特定的屏幕尺寸来说，这不会太难设计，但是元件的定位和屏幕的宽度会随着设备的不同而发生显着变化。我只有两个关于如何解决这个问题的想法，这两个想法都不是一个好方法：

1. 创建一个背景图片，忽略页面上的元素，并且在右侧/左侧没有太多细节，以便在移动设备上切断。
2. 为每种设备尺寸创建单独的背景图像，并使用媒体查询加载正确的图像。

还有更好的方法吗？

以下是我正在谈论的那种背景的示例屏幕截图：

Answer 1

让我们解决这个问题：“如何为响应式网站设计背景图像？”

显然，这个问题的答案不止一个。最简单的解决方案（IMO）将创建一个抽象的高分辨率图像，因此当屏幕尺寸变小时，其部分被切断时不会出现错误。您发布的网站上的背景图片使用此方法。木质镶板导致设计与屏幕尺寸无关。