Close up the browser to see how these options behave at different div sizes

Background sizing

background is proportional to the container

background-size: 50% auto;
background-position: center;

background is fixed width regardless of the container size

background-size: 530px auto;
background-position: center;

a clever mix of the two, where we add a percentage to a fixed size, to get an image that resizes but not as much...

background-size: calc(27% + 250px) auto;
background-position: center;

you can even use 'calc' to make the image size increase as the viewport closes... whatever next?!

background-size: calc(1200px - 63%) auto;
background-position: center;

background sits at a point 75% across the width (left to right) and 20% of the height (top to bottom)

background-size: 25% auto;
background-position: 75% 20%;

background sits against 100% of the width (i.e. all the way to the right), and again 100% of the height (i.e. all the way to the bottom)

background-size: 25% auto;
background-position: 100% 100%;

You can exceed 100% in your position values

background-size: 25% auto;
background-position: 120% 120%;

You can bring the background in a fixed distance from the edge by using 'calc'

background-size: 25% auto;
background-position: calc(100% - 30px) calc(100% - 30px)

You can also make the background go the opposite way to what you might expect...

background-size: 25% auto;
background-position: calc(800px - 60%) calc(400px - 80%);

by combining these, you can get the background to do pretty much what you want, even wacky things like this

background-size: calc(1500px - 102%) auto;
background-position: calc(288px - 60%) calc(97px - 50%);