Order Summary

Community feedback

• 

  P

  Patrick•550

  @patrickppg

  Posted 4 months ago

  About your struggle with the SVG background, since those images are not an essential part of the content of the page, but just a visual background effect, you can implement them fully with CSS. It is easier as well!

  Delete that <div class="background-images"> and the associated styles and add this to your stylesheet:

  body {
    background-image:
      url("./images/pattern-background-desktop.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: var(--pale-blue);
  
    @media (max-width: 450px) {
      background-image:
        url("./images/pattern-background-mobile.svg");
    }
  }
  

  In CSS, backgrounds can also be images and consist of multiple layers of them, so you can add multiple images as the background and one color to be painted below the images. You can read about it in the MDN reference about the background property and its longhands.

  00