Html CSS将两个元素相对定位，并在调整大小时保持不变

我正在尝试将一个图像模型转换为HTML/CSS，并且在调整窗口大小时，我正在努力使内容正确定位并保持相对位置

JSIDLE代码：

全屏JSFIDLE输出：

以下是图像模型：

我不知道如何将粉红色和蓝色的鸟钉在类型上，并使它在不同分辨率和调整窗口大小时保持在该位置。我想使用

max width 100%

和

height:auto，但这似乎不太管用

基本上，我希望粉红色的鸟总是在小写字母“a”的顶部，蓝色的鸟总是在“r”的右下角，而符号是垂直居中并保持在那里

这是CSS：

/*TODO - There should be a way to do the two below using child selectors?*/

#alpha-bio-heading {
    color: #faaacd;
}

#victor-bio-heading {
    color: #85b1d8;
}

/*# TODO - Is there a way to fix this better for page resizes?*/
#pink-bio-bird {
    position: absolute;
    right: 55px;
    top: 28px;
}

#blue-bio-bird {
    position: absolute;
    right: 15px;
    top: 85px;
}        

/*TODO - There should be a better way to centre this within the box.*/
#ampersand {
    position: relative;
    bottom: -120px;
}

你应该


将鸟类图像放入
h1
元素中
使
h1
元素相对定位
根据需要调整图像的左/上位置

改变

    #alpha-bio-heading {
        color: #faaacd;
        position:relative;
    }

    #victor-bio-heading {
        color: #85b1d8;
        position:relative;
    }

    #pink-bio-bird {
        left: 210px;
        position: absolute;
        top: 10px;
    }

    #blue-bio-bird {
        left: 245px;
        position: absolute;
        top: 60px;
    } 

演示在
你应该


将鸟类图像放入
h1
元素中
使
h1
元素相对定位
根据需要调整图像的左/上位置

改变

    #alpha-bio-heading {
        color: #faaacd;
        position:relative;
    }

    #victor-bio-heading {
        color: #85b1d8;
        position:relative;
    }

    #pink-bio-bird {
        left: 210px;
        position: absolute;
        top: 10px;
    }

    #blue-bio-bird {
        left: 245px;
        position: absolute;
        top: 60px;
    } 

演示在
@gaby-aka-g-petrioli真棒，鸟儿现在呆在原地=）-谢谢。有什么可以为符号做的吗？例如，保持符号垂直居中，或者缩小比例，或者以某种方式更好地调整浏览器窗口的大小？@gaby-aka-g-petrioli真棒，鸟类现在呆在原地=）-谢谢。有没有什么办法可以让符号保持垂直居中，或者缩小比例，或者更好地调整浏览器窗口的大小？