Glubase - share your knowledge


All / Computers / Programming / CSS





  • View Command

CSS Reference

CSS background-position definition

Browser support
IEFFOpSaf

Type:

Syntax

background-position: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]

Description

The background-position property defines the position of the background image.

Values

Value Description
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

The first keyword is the horisontal position of the background image. The second keyword is the vertical position of the background image.

Note: If only one keyword is specified the second value will be centered.

x% y% The first percentage value is the horisontal position of the background image. The second percentage value is the vertical position of the background image.
x<unit> y<unit> The first value is the horisontal position of the background image. The second value is the vertical position of the background image. The units can be any of px (pixels), mm (millimeters), cm(centimeters), in (inches), pt (points), pc (picas), em (the element's font height), ex (the element's x-height). 

 Note that it is also possible to combine any of these values for example "background-position: 50% 100px;".

See Also

background, background-attachment, background-color, background-image and background-repeat.

Example

[Try this example yourself]
<style type="text/css">
.position1

  background-image: url(http://www.glubase.com/images/glubase2.gif); 
  background-position: top left;
}
.position2

  background-image: url(http://www.glubase.com/images/glubase2.gif); 
  background-position: 100px 100px;
}
.position3
{
  background-image: url(http://www.glubase.com/images/glubase2.gif); 
  background-position: 40% 20%;
}
</style>
<div class="position1">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="position2">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="position3">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

Output





































  • Comments

No comments added.