Skip to content
Submitted over 2 years ago

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

MirTynan•100
@MirTynan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

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.

Community feedback

  • Abhishek choudhary•1,570
    @dazzlerabhi30800Posted over 2 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
    0
  • Eduardo•910
    @KTrick01Posted over 2 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
    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