Page Widget How to - Set CSS background-position

Question

We would like to know how to set CSS background-position.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {<!--  w  w w. j a va 2 s  .c o  m-->
  background-image: url("http://placehold.it/40x40");
  background-repeat: no-repeat;
  background-position: 10px top;
}

h1, p {
  margin-left: 150px;
}
</style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
    neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec
    nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci
    velit, elementum ac, egestas pellentesque, facilisis non, turpis.
    Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.
    Duis suscipit, lectus varius fermentum fermentum, est lectus facilisis
    metus, ac ornare risus ipsum at sem. Nulla ut eros vel enim tempor
    sagittis. Ut sit amet lacus. Etiam sapien ante, sodales at, volutpat
    nec, pretium ut, augue. Mauris justo pede, volutpat at, pharetra at,
    sollicitudin sit amet, neque. Vestibulum tortor. Morbi nisi.</p>
</body>
</html>

The code above is rendered as follows: