相对于列宽的CSS图像位置或屏幕尺寸

Question

是否可以将图像相对于不同部分的中心或屏幕尺寸的中心进行定位？

我试图放置一个跨越3个部分的大约2.28：1的徽标，以便覆盖每个单独的部分背景，但不覆盖整个行背景。

此外，我想（尽管不是绝对必要）每个部分和徽标的每个部分是不同的颜色。我有点能够通过三种不同的背景和背景的三个不同位置（L部分，L标志等）实现这一点。虽然这在整个屏幕上看起来不错，但当屏幕较小时，标志位置不正确。

我在想这样做的方法是将L和R图像相对于中心列的中心，或相对于整个窗口的中心。如何才能做到这一点？

网站参考：http://ironorrfitness.com

Answer 1

我能够达到预期与左节标识下面的代码影响：

background-position: -webkit-calc(50% + 33vw) 60%; 
background-position: calc(50% + 33vw) 60%; 

，并在右侧的标志下面的代码部分：

background-position: -webkit-calc(50% + 33vw) 60%; 
background-position: calc(50% + 33vw) 60%; 

每个部分都使用了定位相同但每个部分颜色不同的徽标图像。