Re: How to stretch background image vertically/horizontally to fill the whole browser window?
- From: "David E. Ross" <nobody@xxxxxxxxxxx>
- Date: Sun, 22 Mar 2009 07:51:40 -0800
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 ?
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-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
See my home page (URL in my signature bewlow) for an example.
Have you been using Netscape and now feel abandoned by AOL?
Then use SeaMonkey. Go to <http://www.seamonkey-project.org/>.
- Prev by Date: >>> DRESS PATTERNS <<<__________________________________________
- Next by Date: Re: How to stretch background image vertically/horizontally to fill the whole browser window?
- Previous by thread: Re: How to stretch background image vertically/horizontally to fill the whole browser window?
- Next by thread: Re: How to stretch background image vertically/horizontally to fill the whole browser window?