Resizing a background image, as it's too big for the browser

Question

So I'm designing a web page that is incomplete atm, it's only missing 2 buttons so its fairly simple. Instead of messing around with Divs and css styling I decided to make the background in photoshop. I created the image in a resolution of 1920x1080, when I apply the image as the background it doesn't fit the browser window so the bottom right corner is missing. Is there any code I can add to fix this issue or is my best option just recreating the image at a smaller resolution and if so, what resolution should I build for? Here is a link to page in case I didn't explain clearly enough: http://www.itss.brockport.edu/~rsiss1/cis442/BulletinBoard/BulletinBoard Here is the code: ``` BulletinBoard

Accepted Answer

Try the CSS property

```
background-size: cover;
```

There's also `background-size: contain` if you must have the entire image on screen and don't mind extra space around the edges.

Here's a reference for `background-size` on MDN.

Resizing a background image, as it's too big for the browser

Solution

Problem