Joined: 10 Mar 2004 Posts: 376
Location: Savar, Dhaka
Post subject: Background image in the middle of a browser page?
Is it possible to place the background image in a way so that it is always in the middle and center of the webpage? I mean when you resize the browser window, or looking at the page from different resolutions, the background image will always stay in the middle and center of the page. It won't move up or down, left or right. You can do this with table, image or text. But how can we do the same thing with a background image?
Thu Sep 16, 04 11:21 pm
quantum Site Admin
Joined: 07 Mar 2004 Posts: 1048
Location: Dhaka, Bangladesh
Post subject: Fixed center background with CSS
Yeap there is indeed some interesting CSS finction for that. Though I am sure that very few people know of it or even think of using it.
In short, what you are trying to do can be achieved by this CSS one liner:
Code:
background-position:50% 50%;
From w3org:
Quote:
'background-position'
Value: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
Initial: 0% 0%
Applies to: all elements
Inherited: no
Percentages: refer to the size of the box itself
Media: visual
Computed value: for <length> the absolute value, otherwise a percentage
If a background image has been specified, this property specifies its initial position. Values have the following meanings:
<percentage> <percentage>
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
<length> <length>
With a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.
top left and left top
Same as '0% 0%'.
top, top center, and center top
Same as '50% 0%'.
right top and top right
Same as '100% 0%'.
left, left center, and center left
Same as '0% 50%'.
center and center center
Same as '50% 50%'.
right, right center, and center right
Same as '100% 50%'.
bottom left and left bottom
Same as '0% 100%'.
bottom, bottom center, and center bottom
Same as '50% 100%'.
bottom right and right bottom
Same as '100% 100%'.
If only one percentage or length value is given, it sets the horizontal position only, and the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of keyword, length and percentage values are allowed, (e.g., '50% 2cm' or 'center 2cm' or 'center 10%'). For combinations of keyword and non-keyword values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value. Negative positions are allowed.
Example(s):
body { background: url("banner.jpeg") right top } /* 100% 0% */
body { background: url("banner.jpeg") top center } /* 50% 0% */
body { background: url("banner.jpeg") center } /* 50% 50% */
body { background: url("banner.jpeg") bottom } /* 50% 100% */
The tiling and positioning of the background-image on inline elements is undefined in this specification. A future level of CSS may define the tiling and positioning of the background-image on inline elements.
If the background image is fixed within the viewport (see the 'background-attachment' property), the image is placed relative to the viewport instead of the element's padding area. For example,
In the example above, the (single) image is placed in the lower-right corner of the viewport.
If you look at the main site of quantumcloud you will see another interesting background effect. The background is not centered but it is fixed. It does not move with the scrolling. This gives a pretty exceptional effect in my opinion.
