Re: How to stretch background image vertically/horizontally to fill the whole browser window?

On 3/22/2009 12:55 AM, Wladimir Borsov wrote:
Assume I have a *.png or *.jpg picture which I define either in the body tag or the
refering CSS defintion as background image.

The dimensions of this image are in general (much) smaller then the later browser window dimensions.
As a result this background image is duplicated mulitple times and appears lets say
10 x 6 times as frames on the final web page.

However I want the background image to be stretched (or even shrinked) according to the
current web browser window dimensions.

The stretching should be applied either

- only horizontally
- only vertically
- both horizontally and vertically

How do I define the three variants mentioned above in html/CSS ?

Wladimir


First, resize the image (e.g., using Photo Editor) to more than half the
width of a browser window. Don't make it too wide since some users
still set their resolution to 800x600 and others don't use the entire
monitor screen for their browser windows. Widths in the range of of
350-500 pixels are sufficient.

Your CSS for BODY should contain the following:
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;

The first of these results in the image appearing only once. The second
causes the image to "float", remaining in one place on the window while
the Web page is scrolled. The third centers the image in the window.

Of course, a background image should be formatted as a faint watermark
so that it does not prevent users from reading the text content of the
page.

See my home page (URL in my signature bewlow) for an example.

--
David Ross
<http://www.rossde.com/>

Have you been using Netscape and now feel abandoned by AOL?
Then use SeaMonkey. Go to <http://www.seamonkey-project.org/>.
.

Relevant Pages

  • Re: How to stretch background image vertically/horizontally to fill the whole browser window?
    ... As a result this background image is duplicated mulitple times and appears lets say ... However I want the background image to be stretched according to the current web browser window dimensions. ... shrinking or growing. ...
    (comp.infosystems.www.authoring.html)
  • Re: Centering the background image
    ... conforming browser. ... When the browser window is normalized and gradually reduced in height, ... the background image initially remains centered vertically. ... BODY {margin-left: 2em; ...
    (comp.infosystems.www.authoring.html)
  • Re: Centering the background image
    ... When the browser window is normalized and gradually reduced in height, ... the background image initially remains centered vertically. ... element - positioned relative to the viewport, ... and left properties specify a position *within the browser window* - ...
    (comp.infosystems.www.authoring.html)
  • Re: Centering the background image
    ... When the browser window is normalized and gradually reduced in height, ... the background image initially remains centered vertically. ... The "absolute" model uses the top and left properties to specify a position *within the document page* to determine the position for the element - positioned relative to the viewport, ... The "fixed" model behaves like the absolute model, except that the top and left properties specify a position *within the browser window* - positioned relative to the viewport, which is the canvas. ...
    (comp.infosystems.www.authoring.html)
  • Re: How to stretch background image vertically/horizontally to fill the whole browser window?
    ... refering CSS defintion as background image. ... As a result this background image is duplicated mulitple times and appears ... current web browser window dimensions. ... You can't stretch background images in CSS (except in possible worlds ...
    (comp.infosystems.www.authoring.html)