How to create a web page as a single background image not tiled

Updated: 03/13/2021 by Computer Hope

To create a website with a single image as the background, we recommend using the below CSS (cascading style sheets) example in your HTML (hypertext markup language) code.

<style type="text/css">
 <!--
 body {
  background-image: url(https://www.computerhope.com/cdn/computer-hope.jpg);
  background-repeat: no-repeat;
 }
 -->
</style>

To implement the code above, copy the lines and paste in-between the <head> tags. If you use a WYSIWYG (what you see is what you get) web page editor, click the link or option that lets you insert HTML code before entering the code above. Finally, this example uses a picture from Computer Hope. To use a custom picture, replace the bolded URL (uniform resource locator) in the code with the location of your picture.

Tip

If you use an external CSS style sheet, you can also copy the body portion of the example above to your CSS file.

<html>
<head>
Insert above code here
<title>Example</title>
</head>
<body>
</body>
</html>
Tip

Many users may want to create a single large image as their background. If you are planning on doing this, be considerate of people with slower Internet connections. Large images take time to load and may not look proper with people using a smaller monitor size or resolution.

To set the background image to be repeated instead, set the background-repeat property to one of the following values.

  • repeat - repeats the background image both horizontally and vertically.
  • repeat-x - repeats the background image horizontally only.
  • repeat-y - repeats the background image vertically only.