Html CSS背景图像对齐问题

在这段代码中，我的背景图像不会在div之间对齐-我试图清除它们，但没有效果。有人知道是什么引起的，或者我怎样才能让它工作吗？为方便起见，在html中使用CSS

<div class="header" style="height:200px; background-image: url(bg.png); margin:-8px;">
<img src="logo.png" style="margin-left:auto; margin-right:auto;" />
</div>

<div style="text-align:center;">
    <div style="background-image: url(bg.png);background-position:center;  
display:inline-block; width:90px; border-bottom-left-radius: 20px;">Div 1</div>
    <div style="background-image: url(bg.png);background-position:center;  
display:inline-block; width:400px;margin:-4px;">Div 2</div>
    <div style="background-image: url(bg.png);background-position:center;  
display:inline-block; width:90px;border-bottom-right-radius: 20px;">Div 3</div>
</div> 

第一组
第2组
第3组

这是一把小提琴：

---

图像：

我看不到任何背景图像，但据我所知，第二个

不会在第一个和第三个

之间对齐，因为您使用了

显示：内联块而不是
显示：内联


老实说，我不知道这对背景图像的位置有什么影响，因为您没有为图像设置完整的url。

一旦您更改url，我将立即进行调查。
您的边距正在移动div，因此它们的背景会导致条带错位：

无保证金：

除了创建具有设置宽度的容器div之外，还添加了内联块并删除了边距，否则条纹将根据窗口宽度不对齐

好的，所以我添加了背景图像，并将html和css分开（只是因为我认为这样更清晰）。另外，是否有指向
logo.png
的完整url？这是你想要的吗？不，很遗憾。你看到背景条纹在1、2和3区仍然没有对齐吗？我需要以某种方式将它们对齐。尽管我如何将所有这些对齐到页面的中心？如何使页眉div覆盖整个页面（100%）？很抱歉，我发现这很微妙，无论我改变什么，都会破坏其他东西。整体设计非常“令人费解”。使用单个背景图像和两个底角的圆角效果更好。就像这样：但我不知道你最初为什么用这种方式创建东西，我只是在调整你的代码，而不是重新配置它。