with the help of HTML CSS and JS (help with background- image)

Community feedback

• 

  Nakoya Wilson•1,530

  @nakoyawilsonPosted almost 3 years ago

  You can add more than one background-image by separating the url sources with a comma and then you can do the same with background position. The code would look like:

  body {
    background-image: url(./images/bg-top.svg), url(./images/bg-bottom.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: right top, left bottom;
  }
  

  Also in your media query you have the wrong path for your background image. You have background-image: url(/src/images/bg-top.svg); instead of background-image: url(./images/bg-top.svg);

  Marked as helpful

  2

  ---

  

  Daniel•100

  @danM51Posted almost 3 years ago

  @nakoyawilson, I am flabbergasted, thanks a million!

  0

  

  Nakoya Wilson•1,530

  @nakoyawilsonPosted almost 3 years ago

  @danM51 You're welcome!

  0

  

  Stefan•730

  @stfnpczkPosted almost 3 years ago

  @nakoyawilson @danM51 one little side note for the background-repeat property, you only need to set no-repeat once, it gets applied for both svgs. :)

  0

  

  Nakoya Wilson•1,530

  @nakoyawilsonPosted almost 3 years ago

  @stfnpczk Good to know. Thanks!

  0
• 

  Coder Aishya•140

  @Aishwarya-DhuriPosted almost 3 years ago

  You can also use pseudo elements on container for background images like &:before for top background image and &:after for bottom one

  0