Had to pick between background-size cover and contain for a CSS landscape scene

I was building a mountain sunset scene using just gradients and box shadows, no images allowed. The tricky part was getting a large circular sun to stay centered when the browser window changed size. I tried background-size: contain first but it left too much empty space on wide screens. Cover ended up working better because it filled the whole frame, even though I lost a tiny bit of the sun's edge on very tall monitors. Has anyone else run into this issue with CSS-only landscapes?

2 comments

2 Comments

webb.stella12d ago

Does contain always leave that awkward empty strip on widescreens?

terry_hayes1812d ago

The "lost a tiny bit of the sun's edge" thing drives me crazy too. I had the same problem with a CSS-only moon scene and finally just positioned it with vw and vh units instead.