I have some problems with my website. It's a simple one page website.

1 problem it's that i want the images to auto resize when they pop out, but to resize them to fit the most as posible of the '' container '' '' window '', or the phone / tablet available view space, only when the available view space it's smaller that the image itself. For example i have the image from the '' Tarifas '' button which pops out when you click it. If i resize de browser window to be smaller that the image, i want that the width of the image to be exactly like the width of the browser window, to fill it, and resize automatically if the browser window gets smaller.

Another problem it's that if the browser window it's small, and i click one image, for example the image from '' Tarrifas '', or the images from the links under '' Servicios '', the images appear '' cut '', from the left, and i see like 3/4 of them.

And the last problem is with the background image. If i resize the browser window, the background moves to the left automatically, while the other elements of the website remains static. So i want the the background image stay static as well.

my website is: http://aqualica.es

I also added the layout.css file and index.htm

Any help is appreciated. Thank you very much in advance.

the layout.css: http://pastebin.com/2yAbLQWW the index.htm: http://pastebin.com/vR777VBR