Fullscreen background image with padding

Hi!

I working on a site where i want a fullscreen background image - so it scales along with the browser window - but at the same time has 40 pix of space around it.
The image is fulscreen now, but i have run into some problems with the space.
If i do it like this: 40 px at y and x positions

it will look like this:

and i dont know how to do the same for the right side and bottom.

I have tried adding a border or padding to the image, but did not succeed.

I will be happy to hear your suggestions, thanks.

 

Try to to reduce your picture size.... now your picture is 653*503 .... If I am right.Make et 613*463 ...

 

I really hope that is not your serious answer.

 

Would still like to hear suggestions - preferably about css.

Jocaziggg: the img size is not 653x503, that is the size of the screenshot. The image is larger and scales to fit the size of the browser window.

 

There are javascripts and other things out there that allow for background images to fill the screen.

Anything you do with CSS and scaling should be done with percents, not pixels.
You could therefore try putting the image in the background of the body tag. Make the body with percentage padding: 2% (or something like that).
The problem with this approach is that your image won't be scaled.

The other approach is to put your background image in a container <div> with a low z-index, absolute positioning, and your desired padding. Make the image <img> 100%.

Good luck

 

Thanks Xira,

I will give the second approach a try!