Creating a web page with a single background image not a tiled background.

Question

Creating a web page with a single background image not a tiled background.

Answer

To create a website with a single image as the background we recommend you use the below CSS example in your HTML code. This page does not cover how to create a fixed image using the HTML body tag.

<style type="text/css">
<!--
BODY {
background-image: url(http://www.computerhope.com/title.gif);
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. For example, on a new web f above code right after the <head> tag. If you're using a WYSIWYG web page editor you'd 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 wish to use your own 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're 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 different monitor size or resolution.

Additional information

  • Category
  • HTML Q&A
  • Solved?
  • Were you able to locate the answer to your question?