Marcus Hugo• 365
@marcus-hugo
Posted
Looks really good! I had the same thing happening and what worked for me was,
background-position: 0 0;
background-size: auto 100vh;
0
Submitted
Huddle landing page with a single introductory HTML and CSS
Md Ajmal Shadab• 410
@mdajmalshadab
Design comparison
Solution retrospective
My background image is shrinking with change in screen size, I am unable to get desired result please help me out with this.
Community feedback
@mpbrunelle
Posted
Hello,
Nice work. To solve the background problem, you could set the background-size property to cover on the body in the desktop media query:
background-size: cover;
0
Md Ajmal Shadab• 410
@mdajmalshadab
Posted
@mpbrunelle yeah i have tried that also, but still it is shrinking on changing the screen size
0
@mpbrunelle
Posted
@mdajmalshadab Bear in mind that if the background image doesn't shrink, it doesn't expand either. This means that on screens larger than the image, it will not cover the background, which is not ideal.
I think that the idea behind this design is to have an image that covers the page, not the size of the image. That's the tricky part in responsive design: the mockups don't tell us how we should manage the transitions between breakpoints. We have to figure them out by ourselves or talk to the designer to know what they had in mind (most of the time, they haven't given it much thought, by the way).
That said, if you want the background to always keep the same size, you could write:
background-size: 1318px 800px;
Or, since it is an SVG, whatever size you want it to have.
Hoping this is helpful...
Marked as helpful
1
Md Ajmal Shadab• 410
@mdajmalshadab
Posted
@mpbrunelle Thank you!😊
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord