I'm specifying a background image for my webpage, using CSS:

body.main {border-style:none; outline-style:none; margin:0px; padding:0px; background:url('JUB-MasterBackground.bmp') no-repeat}

It is a complicated image (artwork along the top and left border), and would ruin the entire page if it were allowed to repeat. Right now my only option appears to be "a jigsaw puzzle" of a table with 40 different cells, with 40 different images. How can I set the background image, in CSS, to re-size based on the user's browser size? Can the height and width of the background image be set as a percentage of the browser size (i.e.: width="100%" height="100%")? If so, how? Must be compatable with all browsers.

6 answers

0
points

background images is not stretched/resized in CSS 2 yet. Might be possible in CSS 3.

Answered about 7 years ago by Baljeet
Simon 75
0
points

quick concern about using a .bmp image. you will definitely find a better format (probably png or jpeg) depending upon what you feel about Richard's response.

A good thing to do would be as follows

:[gradient fading to left]:[your main image fading to both sides]:[gradient fading to right]

Answered about 7 years ago by Simon
Simon 75
0
points

If you really want to achieve the result you're describing, here are some tips:-

  • You need to use Javascript (probably jQuery if you're unfamiliar)
  • OR
  • A table(non-editable content within)
  • OR
  • CSS (with restrictions on browser compatibility)

Along with this you'll also need:-

  • Really high-res image, optimized properly in photoshop/fireworks (of png/jpg format)

Here's a link I've posted on a similar question. I hope you find it useful:

http://css-tricks.com/perfect-full-page-background-image/

Answered about 7 years ago by Simon
0
points

I don't think you can stretch it currently in CSS, however there's a new property called background-size in CSS3

http://www.w3.org/TR/css3-background/#background-size

Answered about 7 years ago by Richard Wilson
  • The background-size property would indeed be a solution. I doubt it works in IE at the moment but at least it's already working in Firefox! richard about 7 years ago
Nadim 0
0
points

Yes you can have a background image resized to the browser with but not completely using css. You might need to use javascript to do that. Infact you can use this http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/ to resize the background image, though it has a feature for background image slide show but can be turned off when needed

Answered about 7 years ago by Nadim
0
points

Even if stretching can be achieved, stretched images look terrible more often than not. You say that the top and left are busy, which suggests that the bottom and right may not be. If the bottom and right edges of the image are a plain colour, the image can be placed against a background of that colour. (.gif format works best in terms of blending - slight mismatches can occur in some browsers if jpg or png are used.

The image could also end in a gradient in one direction, in which case the body background can be a tiled image of that gradient (repeated in one direction only) and your background can be applied to a wrapper div within the body.

Answered about 7 years ago by Richard Grevers