Spent 3 hours centering a banner image only to lose it on mobile breakpoints

I was tweaking my little hobby site's header and wanted this cool wide banner photo to sit dead center across all screen sizes. Looked perfect on my 27 inch monitor, I was pretty proud of myself. Then I pulled it up on my phone and the whole thing shifted left like it had a vendetta, chopping off half the image. Turns out I was using absolute positioning with a fixed left value instead of something responsive like object-fit or background-position. Learned the hard way that what works on a desktop can totally fall apart on a 375px screen. Has anyone else had a layout look fine in dev tools but break in real life? What do you use for responsive backgrounds that actually scale right?

2 comments

2 Comments

theawest1d ago

Read somewhere that CSS-Tricks has a good guide on responsive background images

johns181d ago

Wait, did they cover the "background-size: cover" trick?