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
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
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 (
) 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.
) 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.