CSS Layout How to - Set image position with CSS3 background-position

Question

We would like to know how to set image position with CSS3 background-position.

Answer


<!--from  w w w.ja v  a  2 s  . com-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html { background: white }
body {
    width: 300px;
    height: 200px;
    background: #333 url(http://www.java2s.com/style/download.png) no-repeat 90% 90%;
    color:white;
    font-family: sans-serif;
    font-weight:bold;
    text-shadow: .05em .05em .1em black;
}
</style>
</head>
<body>
  If the Firefox logo is at the top left corner, 
  your browser doesn't support the CSS3 background-position. 
  
  If it's closer to the bottom right, it does.
</body>
</html>

The code above is rendered as follows: