Submitted about 3 years ago

Help with getting background image to fill screen in under 544px size

@MirTynan

A solution to the Fylo data storage component challenge

Solution retrospective

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.

Code

Please log in to post a comment

Community feedback

Abhishek choudhary•1,670
@dazzlerabhi30800
Posted about 3 years ago
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

Eduardo•910

@KTrick01

Posted about 3 years ago

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 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