Background Image - Set Position and No-Repeat

This image is shown only once, by setting the background-repeat property to no-repeat:

<body>
  <h1>Hello World!</h1>
  <p>W3Schools background image example.</p>
  <p>The background image is only showing once, but it be somewhat disturbing to the reader!</p>
</body>

Hello World!

W3Schools background image example.

The background image is only showing once, but it be somewhat disturbing to the reader!

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much. The position of the image is specified by the background-position property:

<body>
  <h1>Hello World!</h1>
  <p>Now the background image is only shown once, and it is also positioned away from the text.</p>
  <p>I tried adding a right margin, but margins don't work in tables, so I had to use "padding-right: 198px" instead.</p>
  <p>The "margin-right: 198px" works in the body element. See the next page.</p>
</body>

Hello World!

Now the background image is only shown once, and it is also positioned away from the text.

I tried adding a right margin, but margins don't work in tables, so I had to use "padding-right: 198px" instead.

The "margin-right: 198px" works in the body element. See the next page.

When considering a background image, use an image that does not disturb the text. This will mean resizing your browser window to see if there is any conflict of image vs text. It can be quite a challenge!