Responsively position image and text over background with absolute position

Responsively position image and text over background with absolute position
0.0 0

#1

I am trying to put more effort into designing my projects, currently my Twitch Streamers App, but am having trouble. I wanted to get the Twitch logo/image next to the text “streamers” with a purple background like this:

I used absolute position to get an image and text positioned exactly how I wanted it with a purple rectangle behind it. I am using a

with a purple background to get the purple rectangle that spans the whole screen and then using absolute position to put the image and text over it. However, I noticed that it looks jumbled on certain screens because it is not responsive.

This is how I am trying to make it look on all screen sizes, but currently can only get it to work like this for a specific screen size based on the margins I set for the image and text :

If I do not use absolute position,especially for the text, the text floats in the middle like this: span

My Codepen: https://codepen.io/mso122591/pen/jxNoBV

Is it not possible to use absolute position this way and still make the result responsive?

Thanks!


#2

Can’t you just make them all a single graphic? And then make this image responsive and center it on your header.


#3

Yes I guess I could, I was just trying to experiment with the limits of what I could do using CSS.