Create a web page with a single background image not tiled

Updated: 04/26/2017 by Computer Hope

To create a website with a single image as the background, we recommend using the below CSS example in your HTML 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 above code in your web page, copy the above lines and paste in-between the <head></head> sections of your web page. If you are using a WYSIWYG web page editor, you would need to click the link or option that allows you to insert HTML code before entering the above code. Finally, this example is using a picture from Computer Hope. If you want to use a custom picture, replace the above bolded URL with the location of your picture.

Tip: If you are using an external CSS style sheet, you can also copy the body portion of the above example into 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.

Note: If you want to set the background image to be repeated instead, set the background-repeat property to one of the following:

  • 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.

Additional information