Well, I just have to intervene here so that you don’t get off on the wrong foot and thing it’s OK to do what abduraooft showed you with that link. It’s certainly possible to do this but just because it’s possible doesn’t mean that it’s good or right to do this.
I’d like to ask you to use Firefox to visit that page and then switch off the styles (View > Page style > no style). What do you see? I’ll tell you: You see a huge image of a rabbit and nothing else unless you scoll down ten miles. This is not the right approach! This isn’t semantic (http://boagworld.com/technology/semantic_code_what_why_how/) at all and forces the visitor to see an image that’s totally irrelevant to them or the understanding of the site. And even worse: you force visitors viewing your site with anything other than a regular computer to download a huge image and then spend forever to scroll down just to see the actual content they came for.
I can tell you what the correct approach could be. The first thing you need to know is: the background image isn’t important to understand the subject of the site (or shouldn’t be!). People should still get what you want to tell them without seeing any background image. This is why a background image must not be an HTML image (<img>) but actually a background image applied through CSS.
So in future create/use background images where it either doesn’t matter if it fills the entire screen or use images that can tile, and thus, repeat very well.
As to your crrent image this is relatively simple, actually: Slice your image where you have the graphic in the top left and the graphic in the bottom right in two separate images. You then apply these images as CSS backgrounds to two elements (e. g. <html> and <body>) in the respective corners and whenever one resizses the viewport the images would stay in the corners and kinda “scale” with the viewport size. The text in the bottom left and top right shouldn’t be a background image anyway, or at least the top right should be a separate image as well.
