I was asked to design a site with following feature:

- each main section to have it's own background image

- background image to fit the window

- background image subject to have on / off state activated by on / off button on site (e.g. lights on / off)

I'm wondering what's the best way to achieve it? I'm thinking about 2 options:

1. Two pre-loaded, full size background images to swap with the button (might affect the loading times)

2. One background image (on state) and absolutely (or relatively?) positioned div with semi transparent png background (off state image)

I know the 1st option should be easier to achieve and possible. Just wondering if option to would be possible as it seems it would speed up loading times (background images would be quite large).

I'd appreciate your input on this. Thanks.