Looking to hire developers?
Submitted
@MirTynan
This is an issue that I just can't seem to solve, with height and width and max-height and width, or 100vh and 100vw in any project. There must be something basic that I am doing wrong. I want to start my next course, I'm studing at home to try train as a developer but don't want to start without being able to do something this basic. Can anyone please help me? Have a look and see what it is that I am doing wrong or what it is that I don't understand. The problem in this project is when we reach the mobile size in responsiveness. So below 544px. I can't get the background image to fill the screen. Thank you.
@dazzlerabhi30800
Posted
Congrats on completing the project Now changing the design on media query max width: 34em change the .background-img properties as following: height: 100vh, max-height: 100vh, width: 100vw, max-width: 100vw, bottom: initial, margin-left: initial, margin-right: initial, background-size: cover
Marked as helpful
@KTrick01
Posted
Hi!, you can add the background image directly to the body like this:
body {
background-image: url(bg-desktop.png);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
}
And then with your media query you just change these properties:
body {
background-image: url("bg-mobile.png");
background-size: cover;
background-position: center;
}
This will solve the problem that you have, hope that it helps!
Marked as helpful
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
