# 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 positioning

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%);
```