Im working on a challenge and I need assistance moving a background

1

I have a project where i need to have 2 background images, one is a color the other is a .png file. I’ve been able to to place them both but i need to move the png file to the bottom of the window. I’ve tried using background position with no luck. Can anyone help me?


.body-set{
   
    background: url(images/bg-desktop.png), hsl(229, 57%, 11%);
    background-repeat: no-repeat;
   
}
    
    ```
2

watch this video, heacheives the similar using grids

3

I had seen this video where He acheives two back ground images
Youtube Link

4

Not really sure what you mean by the bottom of the window. I’m guessing you mean the viewport and not the bottom of the page.

Anyway, it’s kind of hard to know what it is you are going for without a bit more context.

body {
  background: url(https://images.unsplash.com/photo-1594253727287-dd52af55e496?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)
      bottom center / 50% no-repeat fixed,
    hsl(229, 57%, 11%);
}

Same as:

body {
  background: url(https://images.unsplash.com/photo-1594253727287-dd52af55e496?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80),
    hsl(229, 57%, 11%);
  
  background-position: bottom center;
  background-size: 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}