Solution using SASS & Flexbox

Community feedback

• 

  Jason Moody•300

  @MoodyJWPosted about 3 years ago

  You did a great job on this!

  I'm pretty sure I did this in a kind of hacky way, but this css will put the background in the same position as the challenge example.

  html {
    background: url("./images/pattern-background-desktop.svg");
    background-color: var(--pale-blue);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  

  I like to set the background on the html instead of the body because the height will always match the window height.

  You also want to go into the svg itself and change the height on the desktop version to 900. I'm not sure why it's 1440x437 on the svg, doesn't make sense to me. Hope it helps, good luck!

  0

  ---

  

  Antonio Novak•480

  @Nova988Posted about 3 years ago

  @MoodyJW Thankyou!

  I also looked at your solution and I see that the background is not the same as the design. Mine is placed far above in contrast to the design and yours almost covered the whole background. I think that the height of the image is 437 because it needs to be. If you look at the design you will see it ends in the middle.

  1