background image of div disapears as soon as background position isnt 0 0

I have a div that has a background image (a sprite sheet to be specific) and I want to later use it in an animation but for some reason as soon as the background position of the div is not 0 0 it completly disapears.
Here is the CSS code for said div:
(Doesnt show up because background position is 512px and 256px; the original image is 1792x1792px)

#Shotgun {
    width: 256px;
    height: 256px;
    background: url(./assets/img/Weapons.png) 512px 256px;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

The div in the HTML-code doesnt contain any text or anything else.
When I change background to

background: url(./assets/img/Weapons.png) 0 0;

it does show up but because I want to use a different part of the image its not what I want.

Div should use specific part of background image but background disapears as soon as background position is something other than 0 0.

>Solution :

Here’s the deal with background images in CSS. When you’re setting the background position, it’s a bit like telling the browser where to start drawing your image from. It’s like you’ve got this big ol’ map, and you’re telling it exactly where to start from.

So in your case, if you’ve got a 1792x1792px image and you’re setting your background to 512px 256px, you’re basically telling the browser "Hey, start drawing from 512px to the right and 256px down from the top left corner of the image."

And here’s the kicker: your div is 256x256px, right? So when the browser starts drawing from that point, it’ll just cover a 256x256px area. But, if that area of the image is empty or transparent, it’ll look like there’s no background at all.

Just double check if you’re starting from the correct point. Sometimes, it’s easy to muddle up the X and Y coordinates. I recommend using a graphics editor to figure out the correct coordinates.

Also, instead of using background, consider using the background-image and background-position separately, like:

  #Shotgun {
      ...
      background-image: url(./assets/img/Weapons.png);
      background-position: 512px 256px;
      ...
  }

This gives you a bit more control and clarity over your styles. Hope this gets you unstuck, mate.